深入理解 React 的 `PureComponent`：从基础到原理，由浅入深在 React 开发中，性能优化是一个永

在 React 开发中，性能优化是一个永恒的话题。React 提供了多种方式来减少不必要的渲染和提升应用的响应速度。其中，React.PureComponent 是一个非常实用但容易被误解的类组件基类。本文将带你全面了解 PureComponent，包括它的使用场景、工作原理、潜在陷阱以及与函数组件中 React.memo 的对比。

一、什么是 `PureComponent`

React.PureComponent 是 React 提供的一个类组件基类，它与普通的 React.Component 非常相似，唯一的区别是：PureComponent 自动实现了 shouldComponentUpdate 生命周期方法，对 props 和 state 进行浅层比较（shallow comparison）以决定是否重新渲染组件。

示例代码：

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

在这个例子中，如果 value 没有发生变化（即引用地址不变或基本类型值相同），组件就不会重新渲染。

二、为什么需要 `PureComponent`

在 React 中，组件默认会在其 state 或 props 发生变化时重新渲染。即使这些变化实际上并没有影响 UI 显示，React 也会执行完整的更新流程。这可能导致不必要的性能开销。

使用 PureComponent 可以避免不必要的渲染，特别是在以下场景中：

组件接收的是不可变数据（immutable data）
组件接收的数据结构简单，适合进行浅比较
组件本身渲染成本较高（如复杂的 DOM 结构）

三、`PureComponent` 如何工作

PureComponent 内部实现了一个优化版的 shouldComponentUpdate 方法，该方法会对当前组件的 props 和 state 做浅比较（shallow equality check）。

浅比较 vs 深比较

浅比较（Shallow Compare）：只比较对象的第一层属性是否相等（对于引用类型则比较引用地址）。
深比较（Deep Compare）：递归比较对象的所有层级属性。

例如：

const a = { x: 1, y: { z: 2 } };
const b = { x: 1, y: { z: 2 } };

a === b; // false，两个不同的对象引用
// 浅比较会认为它们不同（因为 y 属性指向不同对象）
// 深比较会认为它们相同（内容一致）

因此，如果你的组件 props 或 state 包含嵌套对象，并且你每次都返回一个新的对象（即使是内容相同），那么 PureComponent 仍然会触发更新。

四、何时使用 `PureComponent`

✅ 推荐使用的情况：

props 和 state 是不可变的（Immutable）
组件不会频繁更新
组件树较深，渲染代价高
数据结构简单，适合浅比较

❌ 不推荐使用的情况：

props 或 state 中包含深层嵌套的对象/数组，且每次传入的引用都不同
组件内部依赖生命周期钩子中的 props/state 变化做复杂逻辑（可能因跳过更新而出现问题）
组件本身渲染很轻量，优化收益不大

五、常见误区与陷阱

1. 错误地认为 `PureComponent` 能自动处理所有情况

由于 PureComponent 使用的是浅比较，如果传递给组件的 props 是一个新对象（即使内容一样），组件仍会更新。

解决方案：

使用不可变数据结构（如 Immer、Immutable.js）
在父组件中使用 useMemo（函数组件）或 shouldComponentUpdate（类组件）控制 props 的引用稳定性

2. 忽略了 state 的变化也会影响比较

PureComponent 同样会对 state 做浅比较。如果你直接修改了 state 对象而不是创建新的对象，会导致比较失效。

错误示例：

this.state.data.push(newItem);
this.setState({ data: this.state.data });

这段代码不会触发更新判断，因为 data 引用没有变化。

正确做法：

this.setState(prevState => ({
  data: [...prevState.data, newItem]
}));

六、与 `React.memo` 的对比

在函数组件中，React.memo 提供了类似 PureComponent 的功能，用于避免不必要的重渲染。

相同点：

都基于浅比较来决定是否更新组件
都适用于展示型组件（无副作用、纯渲染）

不同点：

特性	PureComponent	React.memo
类型	类组件	函数组件
默认比较方式	props + state	props
支持自定义比较函数	否（需手动实现 `shouldComponentUpdate`）	是（可传入第二个参数）

示例对比：

// 类组件
class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.text}</div>;
  }
}

// 函数组件
const MyComponent = React.memo(({ text }) => (
  <div>{text}</div>
));

七、性能考量与最佳实践

1. 避免过度使用

并不是每个组件都需要优化。React 的虚拟 DOM 已经足够高效，只有在确实发现性能瓶颈时才考虑使用 PureComponent 或 React.memo。

2. 控制 props 的稳定性

父组件中使用 useCallback 来保持函数引用稳定
使用 useMemo 缓存复杂计算结果或对象
使用不可变数据操作库（如 Immer）确保引用一致性

3. 使用 DevTools 分析性能

React Developer Tools 提供了“Highlight Updates”功能，可以帮助你识别哪些组件频繁渲染，从而有针对性地进行优化。

八、总结

React.PureComponent 是一种简单而有效的性能优化手段，尤其适合那些接受不可变数据、不频繁更新、渲染成本高的组件。但它的浅比较机制也带来了一些限制和陷阱，开发者需要理解其原理并合理使用。

随着 React Hooks 的普及，越来越多项目转向函数组件，React.memo 成为了更常见的选择。但在某些特定场景下，PureComponent 依然具有不可替代的价值。

九、参考资料

如果你喜欢这篇文章，欢迎点赞、收藏或分享给你的朋友！如果你希望了解更多关于 React 性能优化的内容，也可以关注我后续的文章更新。

深入理解 React 的 `PureComponent`：从基础到原理，由浅入深

一、什么是 PureComponent