react优化

纯 React 优化 1.0 (未完)

2016-11-21  本文已影响49人  PorcoPP
  1. react diff 算法将不会尝试匹配不同组件类的子树。如果发现正在使用的两个组件类输出的 DOM 结构非常相似,你可以把这两个组件类改成一个组件类

  2. 如果没有提供稳定的 key(例如通过 Math.random() 生成),所有子树将会在每次数据更新中重新渲染。

  3. 引入 immutablepureRender 后,render 里的 JSX 注意一定不要有同样的 key(如两个列表,有重复的数据,此时以数据 id 来作为 key 就不太合适,应该要用数据 id + 列表类型作为 key ),会造成不渲染新数据情况。列表页目前的处理办法是将 key 值换成 id + listType

  4. 使用 shouldComponentUpdate 对于变化的 props 以及 state 判断,是否需要重新 render

  5. 对于组件接收数据尽量扁平化,便于优化 diff 比较。

  6. 将方法的 bind 一律置于 constructor ,每次 renderbind ,会消耗性能。

  7. 慎用 setState,因其容易导致重新渲染,shouldComponentUpdate 也需要比较 state

  8. 只传递 component 需要的 props

  9. 组件拆分更细,便于 diff 以及重新 render 成本更小。

  10. 对于 shouldComponentUpdate :(结果影响是否需要 diff )加速 shouldComponentUpdate 的检查,简化 shouldComponentUpdate 的检查,React 官方提供了[Performance Tools],对渲染性能监控
    import Perf from 'react-addons-perf';
    Perf.start();
    ....your react code;
    Perf.stop();
    调用 Perf.printWasted(); 查看组件上进行了无意义的(没有引起真实 DOM 的改变)虚拟 DOM 比较。
    Perf.printInclusive() 的结果则给出渲染各个组件的总体时间

上一篇下一篇

猜你喜欢

热点阅读