当前位置：首页 > article >正文

React中PureComponent的用法

article 2025/2/14 0:45:58

PureComponent 是 React 中的一个类组件，继承自 React.Component，它提供了一个优化性能的机制。PureComponent 会自动实现 shouldComponentUpdate 方法，只有当组件的 props 或 state 发生变化时，组件才会重新渲染。

1. 工作原理

PureComponent 在比较 props 和 state 时，会执行浅层比较（shallow comparison），即比较 props 和 state 的每个属性值是否发生变化。如果某个属性值发生了变化，组件将会重新渲染。如果没有变化，组件将跳过渲染，避免不必要的重新渲染，从而提升性能。

2. 使用场景

PureComponent 适用于那些 props 和 state 都是简单数据类型（如字符串、数字、布尔值等）或是不可变对象（如通过 Object.freeze 或 Immutable.js 管理的对象）的场景。

如果你的组件的 props 或 state 是复杂的对象或数组，且这些数据是可变的，PureComponent 的浅层比较可能不够准确。此时，你可能需要使用 shouldComponentUpdate 来手动优化性能。

3. 代码示例

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log('Rendering...');
    return <div>{this.props.text}</div>;
  }
}

export default MyComponent;

在这个示例中，MyComponent 继承自 PureComponent。如果 props.text 没有变化，React 将跳过渲染，从而提升性能。

4. 浅层比较

PureComponent 使用的是 浅层比较，也就是说，只有当 props 或 state 的引用发生变化时，组件才会重新渲染。如果 props 或 state 是对象或数组，只要其引用没有改变，即使内部数据发生了变化，PureComponent 也不会重新渲染。

例如：

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log('Rendering...');
    return <div>{this.props.data.name}</div>;
  }
}

export default MyComponent;

如果你传递给 MyComponent 的 data 对象引用没有变化，组件就不会重新渲染：

// 父组件
class ParentComponent extends React.Component {
  state = {
    data: { name: 'John' }
  };

  updateData = () => {
    // 这里只是修改了对象内部的值，但 `data` 的引用没有变化
    this.setState(prevState => {
      prevState.data.name = 'Jane';
      return { data: prevState.data };
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.updateData}>Change Name</button>
        <MyComponent data={this.state.data} />
      </div>
    );
  }
}

在上述代码中，MyComponent 即使 data.name 改变了，也不会重新渲染，因为 data 对象的引用没有变化。

5. 何时不使用 `PureComponent`

复杂对象或数组：如果 props 或 state 是复杂对象或数组，并且可能会改变其中的内容但保持引用不变，PureComponent 的浅层比较会导致错误。此时，应该使用深层比较或手动实现 shouldComponentUpdate。
不可控组件：如果你的组件有不可控的行为（例如通过 refs 直接访问 DOM 或通过其他方式修改状态），则 PureComponent 可能不适用。