React中Component与PureComponent的区别

最新推荐文章于 2025-09-18 10:43:40 发布

原创

最新推荐文章于 2025-09-18 10:43:40 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#React #frontend #前端开发

React的Component和PureComponent都是构建App的基本单元，主要区别在于PureComponent提供了浅比较来优化性能。当props或state变化时，PureComponent会进行浅比较新旧props和state，而Component默认不进行此比较。浅比较仅检查基本类型值是否相等或引用类型变量的引用是否相同。若数据是不可变对象且无层级嵌套，PureComponent能提供更好的性能，否则应使用Component并手动执行shouldComponentUpdate来正确更新。

Component是React App的基本构建的单位，也是React中的基本代码复用单位。PureComponent与Component在除了其shouldComponentUpdate方法的实现之外几乎完全相同。PureComponent已经替我们实现了shouldComponentUpdate方法。

对于PureComponent而言，当其props或者state改变之时，新旧props与state将进行浅对比（shallow comparison）。另一方面，Component默认的情况下其shouldComponentUpdate方法并不进行新旧props与state的对比。

那么，此处提及的__shallow comparison__究竟是什么呢？

对于基本类型(primitives），例如数字或者布尔值，来说，浅拷贝将会检查其值是否相同，例如1与1相等，true与true相等。对于引用类型的变量，例如复杂的javascript对象或者数组，来说，浅拷贝将仅仅检查它们的引用值是否相等。这意味着，对于引用类型的变量来说，如果我们只是更新了其中的一个元素，例如更新了数组中某一位置的值，那么更新前后的数组仍是相等的。

因此意味着相比于Component，PureCompoent的性能表现将会更好。但使用PureCompoent要求满足如下条件：