美文网首页前端
react性能提高方法

react性能提高方法

作者: 我的天气很好啦 | 来源:发表于2018-08-29 15:01 被阅读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识别列表中所有子组件的最小变化。

相关文章

网友评论

    本文标题:react性能提高方法

    本文链接:https://www.haomeiwen.com/subject/ewrfwftx.html