React组件性能优化

1. 减轻state

申明变量的时候，将不直接用于页面渲染的数据不放在 state 中，state 只用来存储用来渲染页面UI结构的数据，其余数据（定时器ID，或者仅用来做逻辑判断的数据）可以存储到 this 中

2. 避免不必要的重新渲染

组件的更新机制：父组件更新会引起所有的后代组件发生重新渲染，子组件没有任何变化的额时候也会发生重新渲染，所以我们要避免这种不必要的重现渲染来优化组件性能，

方法：使用钩子函数（shouldComponentUpdate（nextProps,nextState）），该钩子函数在render() 前被执行，提供两个参数 nextProps，nextState用来获取最新的 props 和 state ，通过对比之前的值来确定是否发生数据更新来确定返回值为 false 或者 true 从而影响组件的重新渲染

3. 使用纯组件

纯组件PureComponent 和 React.Component功能相似，纯组件内部会自动实现shouldComponentUpdate钩子函数，不在需要手动输入判断条件。

注：纯组件会自动判断 props 和 state 是否发生变化，纯组件只能判断简单数据类型，复杂数据类型还是需要通过shouldComponentUpdate钩子函数来进行判断，且纯组件相对普通类组件更加消耗性能，过多的使用纯组件可能会起到反作用