Skip to main content

React性能优化

· One min read
wang bo
wang bo
早睡早起

最近看了一些react性能优化的内容，总结一下。思路清晰，从react性能优化原理到性能优化的api使用。

react性能优化的介绍#

开门见山说结论，react性能优化的API，使用时不强制使用。如果出现性能问题（对很多项目来说很可能到项目结束也不会出现），只需要在做优化的时候对该用的地方使用就好了

react为什么需要性能优化#

我认为页面就像数学函数一样

X + Y = Z，对应到前端就是 State + UI = 视图

react，vue这些库的作用就是把 数据 和 UI 进行组合，生成视图

我们都知道，react的更新是整棵树render，所以为了更好的性能，react是需要针对这个特性做一些优化的

react性能优化策略#

在react中数据的展示形式无非是{state，props，content} 只要这三个变量不改变，react就会触发性能优化策略，这个子组件就不会重新render

命中性能优化的解决方案#

demo1#

此demo中，每次点击button，导致num这个state更新，触发页面渲染，导致Demo组件内部全部重复渲染。那么这个demo是否可以性能优化呢？

optimize-demo1.png

demo1的性能优化#

这时我们可以把 耗时且数据不变的组件 和 改变数据的组件 分别抽出来，使ConsumeTask命中react性能优化的规则，从而减少不必要的渲染。

optimize-demo1-opt.png

总结#

只需要 改变代码结构 就可以实现性能优化，保证数据不变就可以击中react的性能优化策略。

为什么react会暴露出性能优化api给开发者#

解析挂载时render阶段的"递"阶段 beginWork函数 中，判断props是否改变是用的全等，这就意味着，每次渲染，即使props里内容为空，也是需要重新渲染的，不能击中react的性能优化

optimize-demo1-beginWork.png

使用了react性能优化的api，例如React.memo就是缓存了之前的值，这样传给子组件的props全等判断就能通过了。

性能优化针对于组件树#

以上说的性能优化的角度都是针对于组件树的，防止子组件重复渲染的。

如果组件中想要缓存数据和方法，防止组件渲染时，该数据重复创建可以使用useRef来保存数据的。