11.React原理及优化

学习目标

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

1.setState() 的说明

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

推荐语法

``` setState((state,props)=>{})语法 参数state：表示最新的state 参数props: 表示最新的props ```

第二个参数

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

this.setState((state,props) => {},()=>{
document.title = '更新state后的标题：'+this.state.count
})

<h2>2.JSX 语法的转化过程</h2>

JSX 仅仅是createElement()方法的语法糖（简化语法）
JSX 语法被@babel/preset-react 插件编译为 creacteElement()方法
React元素：是一个对象，用来描述你希望在屏幕上看到的内容

<h2>3.组件更新机制</h2>

setState() 两个作用：1.修改state 2.更新组件UI
过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染 当前组件子树（当前组件及其所有子组件）

<h2>4.组件性能优化</h2>
<h3>4.1 减轻state</h3>

减轻state: 只存储跟组件渲染相关的数据（比如： count/列表数据/loading等）
注意：不用做渲染的数据不要放在state中，比如定时器id等
对于这种需要在多个方法中用到的数据，应该放在this中

<h3>4.2 避免不必要的重新渲染</h3>

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

class Hello extends Component{
shouldComponentUpdate(nextProps,nextState){
//根据条件，决定是否重新渲染组件
return false
//最新的状态
console.log('最新的state:',nextState)
//更新前的状态
console.log('this.state:',this.state)
}
render(){...}
}

<h3>4.3 纯组件基本使用</h3>

纯组件：PureComponent 与React.Component功能相似
区别：PureComponent内部自动实现了shouldComponentUpdate钩子。不需要手动比较
原理：纯组件内部通过分别对比前后两次props 和state的值。来决定是否重新渲染组件

<h2>5.虚拟DOM和Diff 算法</h2>