美文网首页前端
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