纯 React 优化 1.0 (未完)
-
react diff 算法将不会尝试匹配不同组件类的子树。如果发现正在使用的两个组件类输出的 DOM 结构非常相似,你可以把这两个组件类改成一个组件类
-
如果没有提供稳定的 key(例如通过
Math.random()
生成),所有子树将会在每次数据更新中重新渲染。 -
引入 immutable 和 pureRender 后,render 里的 JSX 注意一定不要有同样的 key(如两个列表,有重复的数据,此时以数据 id 来作为 key 就不太合适,应该要用数据 id + 列表类型作为 key ),会造成不渲染新数据情况。列表页目前的处理办法是将 key 值换成 id + listType。
-
使用 shouldComponentUpdate 对于变化的 props 以及 state 判断,是否需要重新 render 。
-
对于组件接收数据尽量扁平化,便于优化 diff 比较。
-
将方法的 bind 一律置于 constructor ,每次 render 都 bind ,会消耗性能。
-
慎用 setState,因其容易导致重新渲染,shouldComponentUpdate 也需要比较 state 。
-
只传递 component 需要的 props。
-
组件拆分更细,便于 diff 以及重新 render 成本更小。
-
对于 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()
的结果则给出渲染各个组件的总体时间