## 写在前面

1. React本身只关注于界面，并不包含发送ajax请求的代码
2. 前端应用需要通过ajax请求与后台进行交互（json数据）
3. React应用中需要集成第三方ajax库（或自己封装）





**常用的ajax请求库**

- jQuery：比较重，如果需要另外引入不建议使用
- axios：轻量级，建议使用
  - `npm i axios`
  - 封装XmlHttpRequest对象的ajax
  - promise风格
  - 可以用在浏览器端和node服务器端

**启动`server.js`服务**

server1.js

```js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	console.log('请求来自于',request.get('Host'));
	console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})
```

server2.js

```js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})

app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})

app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})
```



## 脚手架配置代理

直接发送请求时会跨域，需要为脚手架配置代理（跨域时请求可发出，服务器可接收，但客户端无法接收返回的信息）

### 方法一

在`package.json`中追加配置：`"proxy": "http://localhost:5000",`，请求时直接请求项目地址。

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）。

### 方法二

在`src`目录下创建配置文件：`src/setupProxy.js`

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

```js
// commonJS写法，不能用ES6写法

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    createProxyMiddleware('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    createProxyMiddleware('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}
```

## gitee搜索用户案例

![image.png](https://s2.loli.net/2022/04/13/hWKAPFolHw4dZpk.png)

### 静态组件

**App.jsx**

```jsx
import React, { Component } from 'react'

import List from './components/List'
import Search from './components/Search'

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <Search />
                <List />
            </div>
        )
    }
}
```

**components/Search/index.jsx**

```jsx
import React, { Component } from 'react'

export default class Search extends Component {
    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input type="text" placeholder="键入想要搜索的内容"/>&nbsp;<button>搜索</button>
            </div>
            </section>
        )
    }
}
```

**components/List/index.jsx**

```jsx
import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
    render() {
        return (
            <div className="row">
                <div className="card">
                    <a rel="noreferrer" href="https://github.com/reactjs" target="_blank">
                    <img alt="name" src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width: '100px'}}/>
                    </a>
                    <p className="card-text">reactjs</p>
                </div>
            </div>
        )
    }
}

```

**components/List/index.css**

```css
.album {
    min-height: 50rem;
    /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
}

.card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
}

.card>img {
    margin-bottom: .75rem;
    border-radius: 100px;
}

.card-text {
    font-size: 85%;
}
```

### axios发送请求

请求地址：https://gitee.com/api/v5/search/users?q=xxxxx

据天禹老师所讲，请求过于频繁可能会401，因此提供了一个本地的服务器用于存放一部分数据以保证项目的顺利展示，这里就不写了

```jsx
export default class Search extends Component {

    searchUser = () => {
        // 获取用户的输入
        const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
        // 发送网络请求
        axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            value => {
                console.log('success', value.data)
            },
            reason => {
                console.log('fail', reason)
            }
        )
    }

    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input ref={c => this.keyWordElement = c} type="text" placeholder="键入想要搜索的内容"/>&nbsp;
                <button onClick={this.searchUser}>搜索</button>
            </div>
            </section>
        )
    }
}
```



> 解构赋值与连续解构赋值：
>
> ```js
> let obj = {a: {b: {c: 1}}}
> let obj2 = {a: {b: 1}}
> 
> console.log('@', obj.a.b.c)
> 
> const {a: {b: {c}}} = obj
> console.log('#', c)
> 
> const {a: {b: data}} = obj2
> console.log('$', data)
> ```
>
> ![image.png](https://s2.loli.net/2022/04/13/oHAqBnzQukIjVsO.png)

### 展示数据

App组件接收用户数据并传递给List组件

```jsx
export default class App extends Component {

    state = {users: []} // 初始化状态，users初始值为数组

    saveUsers = (users) => {
        this.setState({users})
    }

    render() {
        return (
            <div className="container">
                <Search saveUsers={this.saveUsers}/>
                <List users={this.state.users}/>
            </div>
        )
    }
}
```

List组件展示数据

```jsx
export default class List extends Component {
    render() {
        return (
            <div className="row">
                {
                    this.props.users.map((userObj) => {
                        return (
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                <img alt={userObj.name} src={userObj.avatar_url==='https://gitee.com/assets/no_portrait.png' ? 'https://avatars.githubusercontent.com/u/6412038?v=3' : userObj.avatar_url + '!avatar200'} style={{width: '100px'}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
```

![GIF 2022-4-13 18-09-24.gif](https://s2.loli.net/2022/04/13/tlhJEm2ebIfacuQ.gif)

### 优化展示

**App.jsx**

```jsx
import React, { Component } from 'react'

import List from './components/List'
import Search from './components/Search'

export default class App extends Component {

    state = { // 初始化状态
        users: [], // users初始值为数组
        isFirst: true, // 是否首次打开页面
        isLoading: false, // 是否加载中
        err: '' // 存储请求错误
    }

    // 更新App的state
    updateAppState = (stateObj) => {
        this.setState(stateObj)
    }

    /*saveUsers = (users) => {
        this.setState({users})
    }

    changeIsFirst = (users) => {
        this.setState({users})
    }

    changeIsLoading = (users) => {
        this.setState({users})
    }

    saveErr = (users) => {
        this.setState({users})
    }*/

    render() {
        return (
            <div className="container">
                <Search updateAppState={this.updateAppState}/>
                <List {...this.state}/>
            </div>
        )
    }
}
```

**components/Search/index.jsx**

```jsx
import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {

    searchUser = () => {
        // 获取用户的输入
        const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
        // 发送请求前通知App更新状态
        this.props.updateAppState({isFirst: false, isLoading: true})
        // 发送网络请求
        axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            value => {
                // 请求成功后通知App更新状态
                this.props.updateAppState({isLoading: false, users: value.data})
            },
            reason => {
                // 请求失败后通知App更新状态
                this.props.updateAppState({isLoading: false, err: reason.message})
            }
        )
    }

    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input ref={c => this.keyWordElement = c} type="text" placeholder="键入想要搜索的内容"/>&nbsp;
                <button onClick={this.searchUser}>搜索</button>
            </div>
            </section>
        )
    }
}
```

**components/List/index.jsx**

```jsx
import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
    render() {
        const {users, isFirst, isLoading, err} = this.props
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用</h2> : isLoading ? <h2>加载中...</h2> :
                    err ? <h2 style={{color: 'red'}}>{err}</h2> :
                    users.map((userObj) => {
                        return (
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                <img alt={userObj.name} src={userObj.avatar_url==='https://gitee.com/assets/no_portrait.png' ? 'https://avatars.githubusercontent.com/u/6412038?v=3' : userObj.avatar_url + '!avatar200'} style={{width: '100px'}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
```



## 消息订阅与发布

> 在需要接收数据的组件里订阅消息，当其他组件发布该消息时，就会执行其中的回调

使用PubSubJS库：`npm install pubsub-js`

引入PubSubJS库：`import PubSub from 'pubsub-js'`

App组件删除所有与state相关的操作，将state保存在List组件中

List组件中消息订阅；

```jsx
componentDidMount() {
    this.token = PubSub.subscribe('state', (msg, data) => { // msg适用于多个订阅时，区分订阅来源
        this.setState(data)
    })
}

componentWillUnmount() {
    PubSub.unsubscribe(this.token) // 在组件销毁前取消订阅，防止状态泄露
}
```

Search组件中消息发布：

```jsx
searchUser = () => {
    // 获取用户的输入
    const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
    // 发送请求前通知List更新状态
    PubSub.publish('state', {isFirst: false, isLoading: true})
    // 发送网络请求
    axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
        value => {
            // 请求成功后通知List更新状态
            PubSub.publish('state', {isLoading: false, users: value.data})
        },
        reason => {
            // 请求失败后通知List更新状态
            PubSub.publish('state', {isLoading: false, err: reason.message})
        }
    )
}
```

## fetch发送请求

[fetch文档地址](https://github.github.io/fetch/)

[segmentfault上的fetch介绍](https://segmentfault.com/a/1190000003810652)

通过`console.log()`感受一下fetch的“关注分离”：

```js
fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
    response => {
        console.log('联系服务器成功')
        return response.json()
    },
    reason => {console.log('联系服务器失败', reason)}
).then(
    response => {
        console.log('获取数据成功', response);
    },
    reason => {console.log('获取数据失败', reason)}
)
```

![image.png](https://s2.loli.net/2022/05/14/DhFqaEWRJ7vziPG.png)

> 如果联系服务器失败了（比如断网时发送请求）会输出什么？
>
> > ```
> > 联系服务器失败 reason
> > 获取数据成功 undefined
> > ```

1. `fetch`: 原生函数，不再使用`XmlHttpRequest`对象提交`ajax`请求
2. 老版本浏览器可能不支持

全部代码：

```jsx
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component {

    searchUser = async() => {
        // 获取用户的输入
        const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
        // 发送请求前通知List更新状态
        // this.props.updateAppState({isFirst: false, isLoading: true})
        PubSub.publish('state', {isFirst: false, isLoading: true})
        //#region 发送网络请求 --- 使用axios发送
        /* axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            value => {
                // 请求成功后通知List更新状态
                // this.props.updateAppState({isLoading: false, users: value.data})
                PubSub.publish('state', { isLoading: false, users: value.data })
            },
            reason => {
                // 请求失败后通知List更新状态
                // this.props.updateAppState({isLoading: false, err: reason.message})
                PubSub.publish('state', { isLoading: false, err: reason.message })
            }
        ) */
        //#endregion
    
        //#region 发送网络请求 --- 使用fetch发送 -- 未优化
        /* fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            response => {
                console.log('联系服务器成功')
                return response.json()
            },
            reason => {
                console.log('联系服务器失败', reason)
                return new Promise() // 中断Promise链
            }
        ).then(
            response => {
                console.log('获取数据成功', response);
            },
            reason => {console.log('获取数据失败', reason)}
        ) */
        //#endregion

        //#region 发送网络请求 --- 使用fetch发送 -- 优化版本
        /* fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            response => {
                console.log('联系服务器成功')
                return response.json()
            }
        ).then(
            response => {
                console.log('获取数据成功', response);
            }
        ).catch(
            error => {console.log('请求出错', error)}
        ) */
        //#endregion

        try {
            const response = await fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`)
            const data = await response.json() // await要在async里用
            // console.log(data)
            PubSub.publish('state', { isLoading: false, users: data })
        } catch (error) {
            // console.log('请求出错', error)
            PubSub.publish('state', { isLoading: false, err: error.message })
        }

    }

    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input ref={c => this.keyWordElement = c} type="text" placeholder="键入想要搜索的内容"/>&nbsp;
                <button onClick={this.searchUser}>搜索</button>
            </div>
            </section>
        )
    }
}
```

## 总结

1. 设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办

2. ES6解构赋值+重命名：

   ```js
   let obj = {a: {b: 1}}
   const {a} = obj // 传统解构赋值
   const {a: {b}} = obj // 连续解构赋值
   const {a: {b: value}} = obj // 连续解构赋值 + 重命名
   ```

3. 消息订阅与发布机制

   * 先订阅，再发布
   * 适用于任意组件间通信
   * 要在组件的`componentWillUnmount`中取消订阅

4. fetch发送请求（关注分离的设计思想）

   ```js
   try {
       const response = await fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`)
       const data = await response.json() // await要在async里用
       // console.log(data)
       PubSub.publish('state', { isLoading: false, users: data })
   } catch (error) {
       // console.log('请求出错', error)
       PubSub.publish('state', { isLoading: false, err: error.message })
   }
   // 外面需要包一个 async function
   ```

React学习04：React Ajax

React学习03：基于脚手架的React应用

今天闲鱼有买家问我svg能不能写，给我发来了需求：

![image-20220314215027965](https://s2.loli.net/2022/03/14/sITvRqj8nprKa6O.png)

一番百度必应之后，咱就试着写写吧。





构思：页面有一个输入框、提交按钮和一个div（用来展示svg），点击按钮后获取输入框的值。

```html
<input type="text" name="inp" id="inp">
<button id="btn">确定</button>
<div class="box"></div>
```

获取输入框的值很好办，给按钮加一个`onclick`监听来得到`input`的`value`即可

```javascript
function handleSubmit() {
    let input = document.getElementById('inp')
    let value = input.value
    console.log(value)
}
document.getElementById('btn').onclick = handleSubmit
```

测试运行确认可以在控制台输出得到的值即可

接下来创建一个800*600的svg画布

```javascript
let svgNS = "http://www.w3.org/2000/svg"
let div = document.querySelector('.box')
function createTag(tag, obj) {
    var oTag = document.createElementNS(svgNS, tag)
    oTag.setAttribute('id', 's') // 这里为svg标签添加一个id，方便后续清空
    for(var attr in obj) {
        oTag.setAttribute(attr, obj[attr])
    }
    return oTag
}

var osvg = createTag('svg', {'xmlns':'svgNS', 'width':'800', 'height':'600'})
```

下面就是写4个生成函数了，其中圆、椭圆、矩形都有svg提供的标签，正六角星则需要我们通过path绘制

```javascript
function createCircle() {
    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
    circle.setAttribute('cx', 70)
    circle.setAttribute('cy', 80)
    circle.r.baseVal.value = 70
    circle.setAttribute('fill', 'red')
    osvg.append(circle)
}

function createEllipse() {
    var ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
    ellipse.setAttribute('cx', 70)
    ellipse.setAttribute('cy', 80)
    ellipse.setAttribute('rx', 70)
    ellipse.setAttribute('ry', 40)
    ellipse.setAttribute('fill', 'green')
    osvg.append(ellipse)
}

function createRectangle() {
    var rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
    rectangle.setAttribute('cx', 70)
    rectangle.setAttribute('cy', 90)
    rectangle.setAttribute('width', 140)
    rectangle.setAttribute('height', 160)
    rectangle.setAttribute('fill', 'aqua')
    osvg.append(rectangle)
}

function createHexStar() {
    var hexagonalStar1 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    hexagonalStar1.setAttribute('d', 'm247.36202,313.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
    hexagonalStar1.setAttribute('fill', 'blue')
    var hexagonalStar2 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    hexagonalStar2.setAttribute('transform', 'rotate(-180 351.362 284.637)')
    hexagonalStar2.setAttribute('d', 'm247.36202,375.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
    hexagonalStar2.setAttribute('fill', 'blue')
    osvg.append(hexagonalStar1)
    osvg.append(hexagonalStar2)
}
```

最后在`handleSubmit()`中对输入的值进行判断从而执行不同的方法即可，执行前记得添加`document.getElementById('s').innerHTML = ""`来清空画布，下面是效果：

![GIF 2022-3-14 22-02-11](https://s2.loli.net/2022/03/14/3iXVdokKtZyr6En.gif)

最后放上代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <input type="text" name="inp" id="inp">
    <button id="btn">确定</button>
    <div class="box"></div>

    <script>
        window.onload = function() {

            let svgNS = "http://www.w3.org/2000/svg"
            let div = document.querySelector('.box')

            function createTag(tag, obj) {
                var oTag = document.createElementNS(svgNS, tag)
                oTag.setAttribute('id', 's')
                for(var attr in obj) {
                    oTag.setAttribute(attr, obj[attr])
                }
                return oTag
            }

            var osvg = createTag('svg', {'xmlns':'svgNS', 'width':'800', 'height':'600'})

            function createCircle() {
                var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
                circle.setAttribute('cx', 70)
                circle.setAttribute('cy', 80)
                circle.r.baseVal.value = 70
                circle.setAttribute('fill', 'red')
                osvg.append(circle)
            }

            function createEllipse() {
                var ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
                ellipse.setAttribute('cx', 70)
                ellipse.setAttribute('cy', 80)
                ellipse.setAttribute('rx', 70)
                ellipse.setAttribute('ry', 40)
                ellipse.setAttribute('fill', 'green')
                osvg.append(ellipse)
            }

            function createRectangle() {
                var rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
                rectangle.setAttribute('cx', 70)
                rectangle.setAttribute('cy', 90)
                rectangle.setAttribute('width', 140)
                rectangle.setAttribute('height', 160)
                rectangle.setAttribute('fill', 'aqua')
                osvg.append(rectangle)
            }

            function createHexStar() {
                var hexagonalStar1 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
                hexagonalStar1.setAttribute('d', 'm247.36202,313.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
                hexagonalStar1.setAttribute('fill', 'blue')
                var hexagonalStar2 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
                hexagonalStar2.setAttribute('transform', 'rotate(-180 351.362 284.637)')
                hexagonalStar2.setAttribute('d', 'm247.36202,375.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
                hexagonalStar2.setAttribute('fill', 'blue')
                osvg.append(hexagonalStar1)
                osvg.append(hexagonalStar2)
            }

            function handleSubmit() {
                let input = document.getElementById('inp')
                let value = input.value

                document.getElementById('s').innerHTML = ""

                if(value==='C') {
                    createCircle()
                }

                if(value==='E') {
                    createEllipse()
                }

                if(value==='R') {
                    createRectangle()
                }

                if(value==='S') {
                    createHexStar()
                }
            }
            document.getElementById('btn').onclick = handleSubmit

            div.append(osvg)

        }
    </script>
</body>
</html>
```

JavaScript创建SVG

React学习02：React面向组件编程

<div style="text-align: center; width: 100%;">
    <img src="/static/img/d8bba1e02c433a08fd13dca0a119bfdd.logo.svg" alt="logo" style="width: 400px; margin: 50px auto; animation: App-logo-spin infinite 20s linear; background-color: transparent !important;" >
</div>



## React 简介

### 简介

官网

> - 英文官网：[React - A JavaScript library for building user interfaces](https://reactjs.org/)
> - 中文官网：[React官方中文文档 - 用于构建用户界面的 JavaScript 库](https://zh-hans.reactjs.org/)


介绍

> - 用于动态构建用户**界面**的js库（只关注于视图）
> - 由Facebook开源

### 特点

1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效：DOM Diffing算法，最小化页面重绘

## Hello React 案例

### 引入js库

> 1. `react.development.js`：React核心库
> 2. `react-dom.development.js`：React操作DOM的扩展库
> 3. `babel.min.js`：解析JSX转为JS代码的库

### 完整代码

```jsx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React</title>
</head>
<body>
    <div id="test"></div>

    
    <script type="text/javascript" src="./js/react.development.js"></script>

    
    <script type="text/javascript" src="./js/react-dom.development.js"></script>

    
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel"> /* 此处必须为babel */

        // 1.创建虚拟DOM
        const VDOM = <h1>Hello React</h1> /*此处一定不要加引号，因为不是字符串*/

        // 2.渲染DOM
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>

</body>
</html>
```

### 效果展示

![image-20220212160103738](https://s2.loli.net/2022/02/12/i6GQzrBWXIt2J9O.png)

## 虚拟DOM与真实DOM

### 虚拟DOM

虚拟DOM本质就是js中的一个Object类型的对象（俗称一般对象），是React内部在用，无需太多属性。

```jsx
console.log('虚拟DOM', VDOM)
console.log(typeof VDOM)
console.log(VDOM instanceof Object)
```

![image-20220212191213683](https://s2.loli.net/2022/02/12/e79P8E3UudfczCm.png)

### 真实DOM

真实DOM包含众多属性，虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

```jsx
const TDOM = document.getElementById('test')
console.log('真实DOM', TDOM)
debugger;
```

![image-20220212191714751](https://s2.loli.net/2022/02/12/rElCs5AxqkeZJLY.png)

### 虚拟DOM的两种创建方式

1. 使用jsx创建虚拟DOM（jsx的语法糖）

   ```jsx
   const VDOM = <h1 id="title">Hello React</h1>
   ReactDOM.render(VDOM, document.getElementById('test'))
   ```

   嵌套标签

   ```jsx
   const VDOM = (
       <h1 id="title">
           <span>Hello React</span>
       </h1>
   )
   ReactDOM.render(VDOM, document.getElementById('test'))
   ```

2. 使用js创建虚拟DOM（不推荐）

   ```jsx
   const VDOM = React.createElement('h1', {id:'title', class:'t'}, 'Hello React')
   ReactDOM.render(VDOM, document.getElementById('test'))
   ```

   嵌套标签

   ```jsx
   const VDOM = React.createElement('h1', {id:'title', class:'t'}, React.createElement('span', {}, 'Hello React'))
   ReactDOM.render(VDOM, document.getElementById('test'))
   ```

## JSX语法规则

### JSX

JSX全称`JavaScript XML`，是React定义的一种类似于XML的JS扩展语法，其本质是`React.createElement(component, props, ...children)`方法的语法糖。

> 存储和传输数据：
>
> XML
>
> ```xml
> <student>
>     <name>Morales</name>
>     <age>22</age>
> </student>
> ```
>
> JSON
> JS内置JSON对象，JSON.parse()和JSON.stringify()
>
> ```json
> "{"name":"Morales","age":22}"
> ```

JSX的作用：用来简化创建虚拟DOM

> 1. 写法：`var ele = <h1>Hello JSX</h1>`
> 2. 既不是字符串也不是`HTML/XML`标签
> 3. 最终产生JS对象

### 语法规则

1. 定义虚拟DOM时，不要写引号；

   ```jsx
   const VDOM = <h1>Hello React</h1>
   ```

2. 标签中混入JS表达式时要用`{}`；

   ```jsx
   const myId = 'morales'
   const myData = 'Hello REact'
   const VDOM = (
       <h2 id={myId}>
           <span>{myData.toLowerCase()}</span>
       </h2>
   )
   ```

   ![image-20220212194154463](https://s2.loli.net/2022/02/12/SQ5Iw9kXe4cHyE7.png)

3. 样式的类名指定不要用`class`（`class`是`ES6`定义的关键字），要用`className`；

   ```css
   .title {
       background-color: aqua;
       width: 500px;
   }
   ```

   ```jsx
   const VDOM = (
       <h2 id={myId} className="title">
           <span>{myData.toLowerCase()}</span>
       </h2>
   )
   ```

   ![image-20220212194048130](https://s2.loli.net/2022/02/12/KYOhTSHm2ZNLw67.png)

4. 内联样式，要用`style={{key:value}}`的形式写；

   ```jsx
   <span style={{color:'orange', fontSize:'50px'}}>{myData.toLowerCase()}</span>
   ```

   ![image-20220212195047562](https://s2.loli.net/2022/02/12/zHBCDmKSlgLfpnt.png)

5. 虚拟DOM必须只能有一个根标签；

   ```jsx
   const VDOM = (
       <div>
           <h2 id={myId} className="title">
               <span style={{color:'orange', fontSize:'50px'}}>{myData.toLowerCase()}</span>
           </h2>
           <h2 id={myId.toUpperCase()} className="title">
               <span style={{color:'orange', fontSize:'50px'}}>{myData.toLowerCase()}</span>
           </h2>
       </div>
   )
   ```

6. 标签必须闭合；

   ```jsx
   <input type="text" />
   ```

7. 标签首字母：

   > 1. 若小写字母开头，则将该标签转为html中同名标签，若html无同名标签，则报错；
   >    ![image-20220212200550241](https://s2.loli.net/2022/02/12/qgL2dziWH4NG1su.png)
   > 2. 若大写字母开头，则React将渲染对应的组件，若组件未定义，则报错。
   >    ![image-20220212200738415](https://s2.loli.net/2022/02/12/s2vbHYoLVrOdQRy.png)

## JSX练习

### 效果

![image-20220212203558145](https://s2.loli.net/2022/02/12/YoilZ2VT6M5zAQK.png)

### 完整代码

```jsx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX练习</title>
</head>
<body>
    <div id="test"></div>

    
    <script type="text/javascript" src="./js/react.development.js"></script>

    
    <script type="text/javascript" src="./js/react-dom.development.js"></script>

    
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel"> /* 此处必须为babel */

        // 模拟数据
        const data = ['Angular', 'React', 'Vue']

        // 1.创建虚拟DOM
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    { // 此处仅可以写js表达式
                        
                        /*此写法以后可能会产生严重问题，入门阶段为方便学习暂时使用此写法*/
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

    </script>

</body>
</html>
```

![image-20220212203014878](https://s2.loli.net/2022/02/12/BhmTXiRqSgNweHZ.png)

## 模块与组件

### 模块

模块是向外提供特定功能的js程序，一般就是一个js文件

随着业务逻辑增加，代码越来越多且复杂，因此使用模块

作用：复用js，简化js的编写，提高js运行效率

### 组件

组件是用来实现局部功能效果的代码和资源的集合（html/css/js/image等）

一个界面的功能更复杂时用到组件

作用：复用编码，简化项目编码，提高运行效率

### 模块化

当应用的js都以模块来编写时，这个应用就是一个模块化的应用

### 组件化

当应用是以多组件的方式实现时，这个应用就是一个组件化的应用

写在前面

初始化脚手架

使用 npx 创建

React 开发者工具