React15 - React 15 中 React.pureComponent 的使用场景

React.PureComponent 是 React 15.3 引入的一个优化手段，它通过浅比较（shallow compare）props 和 state 来自动实现 shouldComponentUpdate，从而避免不必要的重新渲染。理解何时使用它，可以帮你写出更高效的 React 应用。

什么时候应该使用 `React.PureComponent`？

1. 组件是“纯”的（Pure）

输入相同，输出相同：给定相同的 props 和 state，组件总是渲染相同的结果。
没有副作用：组件内部不依赖外部可变变量，也不在生命周期中执行副作用操作（如直接修改 DOM、发送网络请求等），这些操作应放在 componentDidMount 或 componentDidUpdate 中。

2. 组件频繁接收相同的 props/state，但父组件经常重新渲染

如果你的组件在父组件每次更新时都被重新渲染，但它的 props 和 state 实际上并没有变化，使用 PureComponent 可以跳过这次渲染，提升性能。
典型场景：列表项组件、展示型组件（presentational components）、叶子节点。

3. 组件层级较深，但 props 变化不频繁

在组件树中，如果某些分支很少变化，使用 PureComponent 可以阻止该子树的不必要更新。

什么时候不应该使用 `React.PureComponent`？

1. props 或 state 包含可变数据结构（mutations）

因为 PureComponent 只做浅比较，如果直接修改对象或数组内部的值（而没有创建新对象），浅比较会认为新旧值相等，从而跳过更新。

❌ 错误示例：

this.state.user.name = "New Name"; // 直接修改对象属性
this.setState({ user: this.state.user }); // 引用相同，PureComponent 认为没变化

✅ 正确做法：总是创建新对象或数组：

this.setState({ user: { ...this.state.user, name: "New Name" } });

2. props 中包含复杂嵌套数据

浅比较只比较第一层属性。如果父组件传入了深层嵌套的对象，而只有深层属性发生变化，浅比较无法检测到，导致组件不更新。
解决方案：使用 shouldComponentUpdate 做深比较，或者使用 React.memo（函数组件）配合自定义比较函数。

3. 组件依赖 `children` 或 `render props`

如果组件的 props.children 是动态生成的 JSX 或函数，每次父组件渲染时都会生成新的引用，导致浅比较认为 props 变化，从而失去优化意义。
此时使用 PureComponent 往往没有效果，甚至可能因为频繁比较而增加开销。

4. 组件有副作用（side effects）

如果组件的渲染依赖外部变量（如 window 上的数据）或执行了副作用（如日志记录），那么跳过渲染可能会造成逻辑错误。

实际使用建议

1. 优先考虑函数组件 + `React.memo`

在 React 16.6+ 中，函数组件可以使用 React.memo，它提供了类似 PureComponent 的浅比较优化，且更加灵活：

const MyComponent = React.memo(function MyComponent(props) {
  // 渲染逻辑
});

你可以传入第二个参数自定义比较函数，弥补浅比较的不足。

2. 如果使用类组件，可以这样判断

默认不使用：除非你明确知道组件在频繁接收相同的 props/state，且这些 props/state 是不可变的。
先写普通组件，遇到性能瓶颈时再考虑优化：避免过早优化，以免引入 bug。

3. 配合不可变数据（Immutable Data）

使用 Immutable.js、Immer 或对象/数组展开运算符（...）确保每次更新都产生新引用。
这能让浅比较可靠地工作。

在 React 15 中的注意事项

React.PureComponent 在 React 15.3.0 中引入，如果你的项目使用的是更低版本，需要升级。
在 React 15 中，componentWillReceiveProps 仍被广泛使用，但配合 PureComponent 时要注意：父组件每次重新渲染都会传递新的 props（即使内容相同），但浅比较会正确过滤掉无实际变化的更新。

总结：决策流程图

组件是否纯（无副作用，输入相同输出相同）？
  ├─ 否 → 不要用 PureComponent
  └─ 是 → props/state 是否包含可变数据结构或深层嵌套？
       ├─ 是 → 不要用 PureComponent（或确保不可变更新）
       └─ 否 → 组件是否频繁接收相同 props/state？
            ├─ 是 → 可以使用 PureComponent
            └─ 否 → 使用普通 Component 即可

React.PureComponent 是一个很有用的性能优化工具，但只有在你正确管理数据不可变性且组件符合“纯组件”特征时，才能发挥它的优势。

posted @ 2026-03-24 22:52 箫笛阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

箫笛