react性能提高方法
2018-08-29 本文已影响0人
我的天气很好啦
🌟react性能优化有几方面:
-
shouldComponentUpdate这个方法用来判断是否需要调用render方法重绘dom,因为dom的重绘非常消耗性能,如果我们能在shouldComponentUpdate方法里能够写出更优化的dom diff算法,可以极大的提高性能。
-
虚拟dom
虚拟dom相当于在js和真实dom中加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高了性能。
具体实现步骤如下:
1、用JS对象结构表示dom树的结构,用这个树构建一个真正的dom树,插到文档中。
2、当状态变更时,重新构造一棵新的对象树,然后用新的树和旧的树进行比较。
3、记录两棵树差异,把所记录的差异应用到真正的dom树上,视图就更新了。
🌟react性能优化方案
- 重写shouldComponentUpdate来避免不必要的dom操作。
- 使用 production 版本的react.js。
- 使用key来帮助React识别列表中所有子组件的最小变化。