react组件性能优化笔记

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

class Mouse extends React.Component {
  //     state = {
  //       x: 0,
  //       y: 0
  //     }
  //     handleMouseMove = e => {
  //       this.setState({
  //         x: e.clientX,
  //         y: e.clientY
  //       })
  //     }
  //     componentDidMount() {
  //       window.addEventListener('mousemove', this.handleMouseMove)
  //     }
  //     // 组件消失时卸载鼠标移入事件
  //     componentWillUnmount() {
  //       window.removeEventListener('mousemove', this.handleMouseMove)
  //     }
  //     render() {
  //         console.log('Mouse高阶组件内', this.props)
  //       return (
  //         <div>
  //           <WrappedComponent {...this.state} {...this.props}></WrappedComponent> // 用在这里了
  //         </div>
  //       )
  //     }

二、避免不必要的重新渲染
1.组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
2.问题：子组件没有任何变化时也会重新渲染
3.如何避免不必要的重新渲染呢？
4.解决方式：使用钩子函数shouldComponentUpdate(nextProps, nextState)。参数都表示最新的。this.state可以拿到更新前的状态
5.作用：通过返回值决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染
6.触发时机：更新阶段的钩子函数，组件重新渲染前执行(shouldComponentUpdate -> render)

三、纯组件
1.纯组件：PureCompontent与React.Component功能相似

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