React 组件性能优化方案

• 使用 shouldComponentUpdate 通知 React 当前组件是否需要参与 Diff (component diff 环节)
• 继承 React.PureComponent (纯组件) 通过 props 和 states 的浅对比来自动实现 shouldComponentUpate(), 其他特征与 React.Component 表现一致。此外, 可以通过高阶函数 React.memo (React16.6 新增) 将函数式组件包装为纯组件
• 由于 tree diff 算法特性, Virtual DOM 层级结构变化会重新创建对应节点, 所以保持稳定的 DOM 结构会有助于性能的提升。例如，可以通过 CSS 隐藏或显示节点，而不是移除或添加 DOM 节点。
• 尽可能避免 DOM 类型变更, component diff 算法会将类型改变的 DOM 重新创建
• 为统一层级不同节点添加静态 key 以优化个别元素的添加/删除/移动操作

参考

• https://zh-hans.reactjs.org/docs/optimizing-performance.html
• https://zhuanlan.zhihu.com/p/20346379