React 组件性能优化

1. 减轻 state

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

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

• 组件更新机制：父组件更新时会引起子组件也被更新。
• 但这会导致一个问题：子组件没有任何变化时也会重新渲染
• so 解决方式：使用 钩子函数 shouldComponentUpdate(nextProps, nextState)
• 作用：通过返回值决定该组件是否重新渲染，返回 true 表示 重新渲染，false 表示不重新渲染
• 触发时机：更新阶段的钩子函数，组件重新渲染前执行（shouldComponentUpdate（） -> render）

3. 纯组件

• 纯组件：PureComponent 与 React.Component 功能相似
• 区别：PureComponent 内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较
• 原理：纯组件内部通过分别 对比 前后两次 props 和 state 的值，来决定是否重新渲染组件
• 说明：纯组件内部的对比 shallow compare（浅层对比）
• 对于引用类型来说：只比较对象的引用（地址) 是否相同
• 注意：state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据！

class NumberBox extends React.PureComponent {
  render() {
    console.log('子组件中的render')
    return <h1>随机数：{this.props.number}</h1>
  }
}