React
虚拟DOM
- 本质是Object类型对象
- 虚拟DOM轻量
- React会将虚拟DOM转化为真是DOM
JSX语法
- js表达式用{}
- 样式类名className
- 内联样式用
style={{key: value}}
- 只有一个根节点
- 标签必须闭合
- 标签首字母自定义的要大写
生命周期
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#初始化阶段
1、constructor()
2、componentWillMount() -> getDerivedStateFromProps()
3、render()
4、componentDidMount()
#更新阶段
1、shouldComponentUpdate()
2、componentWillUpdate() -> getDerivedStateFromProps()
3、render()
4、componentDidUpdate(preProps, preState) -> getSnapshotUpdate()
#卸载阶段: ReactDOM.unmountComponentAtNode()
1、componentWillUnmount()
|
DOM的diff算法
key的作用
key是虚拟DOM对象的标识，在更新显示时key非常重要
具体的，当状态中数据发生变化时，React会根据【新数据】生成【新虚拟DOM】，随后React进行新旧DOM的diff比较，规则如下：
-
旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 虚拟DOM中内容没变，则使用之前的真实DOM
- 虚拟DOM中内容改变，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
-
旧虚拟DOM中未找到与新虚拟DOM相同的key
用index作为key可能引发的问题
1
2
3
4
5
6
7
8
|
虚拟dom
<li key=0>小王 <input type="text"></li>
更新后虚拟dom
<li key=0>小张 <input type="text"></li>
<li key=1>小王 <input type="text"></li>
此时key=0中input标签相同未改变，所以小王的input复用在小张中，但其内容有残留
|
开发中如何选择key
React脚手架配置代理
1.package.json配置proxy
配置一个代理！
1
2
3
4
|
#package.json中
"proxy": "http://localhost:5000"
#当在3000中未发现该文件时，会向5000请求
|
1
|
axios.get('http://localhost:3000/students')
|
2.setupProxy.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy('/api1', {//遇见/api1前缀的请求。就会触发该代理
target: 'http://localhost:5000',//转发目标
changeOrigin: true,//控制服务器收到的响应头中Host字段的值
pathRewrite: { '^/api1': '' }
}),
proxy('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: { '^/api1': '' }
}),
)
}
|
消息订阅-发布机制
PubSub
安装
使用
1
2
3
4
5
6
7
8
9
10
|
import PubSub from 'pubsub-js'
#创建订阅
var token = Pubsub.subscribe(name, function)
#发布订阅
PubSub.publish(name, content)
#取消订阅
根据name
PubSub.unsubscribe(token)
根据function
PubSub.unsubscribe(function)
|
