react 性能优化注意事项

工具：

1. React 16 或更新版本   只需在url 后边加  ?react_perf 后 performance 一栏中会添加 User Timing
2. devtool 分析 state、props 、组件树、redux store 数据；
3. profiler 工具能分析具体函数；
4. Timeline 工具跟 User Timing 大同小异；

 

优化点： 

1. 父组件更新默认触发所有子组件更新
2. 列表类型的组件默认更新方式非常复杂

 

建议：

1. 如果你有些组件是纯组件，那么把继承类从 Component 换成 PureComponent；
2. 用immutable生成不可变数据；（ seamless-immutable 简易版）
3. 针对列表遍历类型，遍历时候增加唯一 key 属性值（不推荐用数组下表）；
4. 不是纯组件的话，子组件执行 shouldComponentUpdate 方法，自行决定是否更新 ；
5. render 尽量少新建变量 和 bind 函数，在constructor() 中做；
6. 函数中传参数量尽量少；
7. 组件中 style 样式 定义变量引入；
8. 不要将包裹节点的类型随意修改；
9. 使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少；
10. 组件层次结构颗粒化；
11. 请尽量使用const element、 兜底值、对象、数组字面量放在组件外定义；
12. {...this.props} (不要滥用，请只传递component需要的props，传得太多，或者层次传得太深）；
13. 使用无状态组件，没有生命周期，只是简单的接受 props 渲染生成 DOM 结构；
14. reselect 对redux 请求的数据进行缓存，没变就从缓存中取；
15. 去抖频繁触发的事件（如：scroll、resize），lodash 有 _.debounce ，也有debounce的npm包；
16. setTimeout 和 setInterval 事件  有 react-timeout 包 npm；