react详细介绍性能优化

首先要了解网页性能不好的罪魁祸首

浏览器的重绘和重排版(reflows&repaints)(DOM操作都会引起)才是导致网页性能问题的关键。

而React虚拟DOM的目的就是为了减少浏览器的重绘和重排版。
  一：react中的问题

有时候组件的render方法会在不必要的情况下被调用。

比如：

组件渲染的过程中，并没有使用props或者state的值，或者组件的props或者state并没有在父组件重新绘染时发生改变。这意味着重新绘染这个组件会得到和已知虚拟DOM一模一样的结果。二：优化关键shouldComponentUpdate

【shouldComponentUpdate的作用与使用pureComponent和React.memo作用一致】

组件更新生命周期中必调用shouldComponentUpdate，字面意思是组件是否应该更新。shouldComponentUpdate默认返回true，必定更新。所有当我们判断出组件没必要更新时，shouldComponentUpdate可以返回false，就达到优化效果。

shouldComponentUpdate生命周期有俩个参数，一个是nextProps，另一个是nextState，而我们就用这俩个上一次的props和state与这一次的props和state去做比较，如果俩者相同，那么就return false，不让它进行更新就可以了。

注意点：

shouldComponentUpdate()生命周期正常情况下只会进行浅比较。如果要进行深比较请继续往下看。

深比较和浅比较涉及到堆内存和栈内存的知识点，可以观看笔者的另外一篇博客去深入了解。

示例代码如下：