React基础知识点总结--4

五、React原理揭秘

目标

◆ 能够知道setState()更新数据是异步的
◆ 能够知道JSX语法的转化过程
◆ 能够说出React组件的更新机制
◆ 能够对组件进行性能优化
◆ 能够说出虚拟DOM和Diff算法

目录

◆ setState() 的说明
◆ JSX语法的转化过程
◆ 组件更新机制
◆ 组件性能优化
◆ 虚拟DOM和Diff算法

1.setState() 的说明

1.1 更新数据

● setState()是异步更新数据的
● 注意:使用该语法时,后面的setState()不要依赖于前面的setState()
● 可以多次调用setState() , 只会触发一次重新渲染

1.2推荐语法

● 推荐:使用**setState((state, props) => {})**语法
● 参数state :表示最新的state
● 参数props :表示最新的props

1.3第二个参数

● 场景:在状态更新(页面完成重新渲染)后应即执行某个操作
● 语法:setState(updater[,callback])

2. JSX语法的转化过程

● JSX仅仅是createElement(方法的语法糖(简化语法)

● JSX语法被@babel/preset-react插件编译为createElement()方法

● React元素:是一个对象,用来描述你希望在屏幕上看到的内容

3. 组件更新机制

● setState()的两个作用: 1. 修改state 2.更新组件(UI )

● 过程:父组件重新渲染时,也会重新渲染子组件。但只会渲染当前组件子树(当前组件及其所有子组件)

4.组件性能优化

4.1减轻state

● 减轻state :只存储跟组件渲染相关的数据(比如: count/列表数据/ loading等)

● 注意:不用做渲染的数据不要放在state中,比如定时器id等

● 对于这种需要在多个方法中用到的数据,应该放在this中

4.2 避免不必要的重新渲染

● 组件更新机制:父组件更新会引|起子组件也被更新,这种思路很清晰
● 问题:子组件没有任何变化时也会重新渲染
● 如何避免不必要的重新渲染呢?
● 解决方式:使用钩子函数shouldComponentUpdate(nextProps, nextState)
● 作用:通过返回值决定该组件是否重新渲染,返回true表示重新渲染, false表示不重新渲染
● 触发时机:更新阶段的钩子函数,组件重新渲染前执行( shouldC omponentUpdate --> render )

● 案例：随机数

4.3 纯组件

● 纯组件: PureComponent与React.Component功能相似
● 区别: PureComponent内部自动实现了shouldComponentUpdate钩子,不需要手动比较
● 原理:纯组件内部通过分别对比前后两次props和