react教程 — 性能优化

参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool  或  https://blog.csdn.net/qq_37398213/article/details/82284244 或 https://www.jianshu.com/p/76ee90125e9f

一、react 组件的 更新,默认做法是调用所有组件的render,再对生成的虚拟DOM进行对比,如不变则不进行更新。这样的render和虚拟DOM的对比明显是在浪费。

  解决 react 多余的 render 方法:

  1、shouldComponentUpdate:比较麻烦的就是,如果 state 或 props 是深层对象,则 前后数据 有没有 变化,很不好判断。  https://www.cnblogs.com/penghuwan/p/6707254.html

    a、state 或 props 下面要判断的数据是,基本数据类型。直接使用 == 就判断就可以了。下面几点都是解决深层对象的比较问题。

  shouldComponentUpdate(nextProps,nextState){
      if(nextProps.number == this.props.number){
        return false
      }
      return true
  }

    b、ES6的扩展语法  Object.assign() 进行 拷贝【Object.assign 也只能进行 浅拷贝

    c、JSON.parse(JSON.stringify(data))  可以进行 深拷贝但使用受一定限制,具体的童鞋们可自行百度

    d、immutable.js       这个怎么处理的 自行百度

  2、PureComponent:

二、事件函数中,this 的绑定:   【 “react教程 — 核心概念”  中有介绍,这里就不讲了】

三、


react 函数组件的性能优化:  参考链接

猜你喜欢

转载自www.cnblogs.com/wfblog/p/11909629.html