首先要了解网页性能不好的罪魁祸首
浏览器的重绘和重排版(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()生命周期正常情况下只会进行浅比较。如果要进行深比较请继续往下看。
深比较和浅比较涉及到堆内存和栈内存的知识点,可以观看笔者的另外一篇博客去深入了解。
示例代码如下: