React 中的纯组件：工作原理及使用时机

React 中的纯组件主要关注性能优化。它们通过检查组件的输入（props 或 state）是否真正发生变化来帮助应用程序避免不必要的重新渲染。在本文中，我们将通过清晰、现代的示例来探讨纯组件的工作原理、使用方法以及适用场景。

什么是纯组件？

纯组件是一种只在其 props 或 state 发生变化时才重新渲染的组件。React 通过对当前 props/state 与先前的 props/state 进行浅比较来确定是否应该重新渲染。

使用 React.PureComponent

React.PureComponent 是类组件中纯函数的等效物。它实现了内置的 shouldComponentUpdate() 方法，该方法执行浅比较。

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

如果 this.props.text 没有变化，组件将不会重新渲染。

函数组件替代方案：React.memo

对于函数组件，使用 React.memo()。

const MyComponent = React.memo(function MyComponent({ text }) {
  return <div>{text}</div>;
});

如果 text 与上一次渲染相同，React 将跳过渲染。

浅比较的工作原理

浅比较意味着：

• 原始值（如数字或字符串）按值比较
• 对象和数组按引用比较

{ a: 1 } === { a: 1 } // false
const obj = { a: 1 }
obj === obj // true

因此，如果你传递的是一个被修改而不是重新创建的对象，纯组件可能不会注意到变化。

实际示例

未优化的情况

const Item = ({ data }) => <div>{data.label}</div>;

每当父组件重新渲染时，即使 data 没有变化，这个组件也会重新渲染。

使用 React.memo 的情况

const Item = React.memo(({ data }) => <div>{data.label}</div>);

现在组件只有在 data 是一个新对象时才会重新渲染。

何时使用 PureComponent 或 memo

• 渲染包含许多项目的列表时
• 组件的 props 在渲染之间保持稳定
• 你想减少性能敏感部分应用中的渲染周期
• 你正在使用 useCallback 或 useMemo 来保持引用

常见陷阱

• 浅比较无法检测深层变化（嵌套对象/数组）
• 除非你确信 props 不会静默变化，否则不要使用它
• 如果传递不稳定的引用，可能会引入 bug

React.memo 与 React.PureComponent 的比较

特性 React.PureComponent React.memo 组件类型 类组件 函数组件 比较逻辑 Props + state（浅比较） 仅 Props（浅比较） 自定义比较函数 ❌ ✅ React.memo(fn) 现代使用情况 较少使用 广泛使用

结论

纯组件可以帮助 React 跳过重新渲染并保持 UI 性能 — 但它们不是万能的。对于函数组件，优先使用 React.memo，并理解浅比较意味着引用很重要。在性能重要且 props 稳定的情况下使用它。

常见问题