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 或 https://segmentfault.com/a/1190000018549047

　　　　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：

　　3、shouldComponentUpdate 中 的比较，一般只进行 浅比较。至于为什么不深比较？因为那样效率可能会比直接全都运行 render 还低。

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

三、

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