react性能提高方法

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识别列表中所有子组件的最小变化。

你可能感兴趣的:(react性能提高方法)