「前端」浅淡React组件性能优化（PureComponent）

最新推荐文章于 2024-11-21 20:54:12 发布

Jack_WJQ

最新推荐文章于 2024-11-21 20:54:12 发布

阅读量409

点赞数

分类专栏： # React学习记录文章标签： React JavaScript 前端性能优化

本文链接：https://blog.youkuaiyun.com/qq_26377547/article/details/103324492

版权

本文探讨了在前端项目中，特别是在React开发中，如何利用PureComponent进行组件性能优化。通过理解PureComponent的工作原理，即通过浅比较避免不必要的组件渲染，减少函数执行，提升性能。文章指出，对于引用类型的数据，浅比较可能导致误判，解决方案是确保每次更新时改变对象的引用。还介绍了不可变数据结构的概念，帮助开发者更好地处理对象修改，以配合PureComponent达到优化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端项目的开发过程中，经常会遇到性能优化的问题。项目比较小型还没什么太大的影响，当项目的规模达到一定程度的时候，性能问题就显得比较突出了。
之前在做项目的过程中，并没有怎么在意组件的性能问题，最近看了一些文章，发现组件的性能优化并不是一件特别复杂的事情，只需要在写代码的时候稍微注意即可实现性能的优化。

React 15.3中新增加了一个PureComponent类，能够减少render函数的执行次数，避免不必要的组件渲染，实现性能上的优化，这其中的原理是什么呢？

原理

当组件更新的时候，如果组件的props和state均为发生改变，则不会触发render函数，省去了Virtual DOM的生成和比对过程，达到提升性能的目的。底层原理就是，React自动为我们做了一层浅比较，判断props和state是否发生变化，根据比较结果来决定组件是否更新：

if (this._compositeType === CompositeTypes.PureClass) {
   
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}