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;
 
posted @ 2018-10-25 16:33  司马老朋  阅读(380)  评论(0编辑  收藏  举报