ReactJS - PureComponent 类

更新于 2025/3/24 2:07:17

众所周知，React 是一个非常流行的 JS 库，用于创建交互式用户界面。它完全基于组件。因此，React 中存在一种称为 PureComponent 的组件。它与 Component 非常相似，但它避免了对相同 props 和状态进行重新渲染。

语法

class MyComponent extends PureComponent {
   render() {
      return <h1>Hiii, {this.props.name}!</h1>;
   }
}

我们可以在上面的代码示例中看到。我们扩展了 PureComponent 来代替 Component。我们通常会扩展 Components。因此，为了避免为相同的 props 和 state 重新渲染类组件，我们可以扩展 PureComponent。

React 中的 PureComponent 只是常规 Component 的增强版本。它能够执行 Component 的所有功能。PureComponents 的主要优点是它在重新渲染之前会检查 props 和 state 是否已更改。

PureComponent 类似于自定义的"shouldComponentUpdate"方法。shouldComponentUpdate 方法的作用是确定是否应更新组件。但 PureComponent 会自动执行此检查，仅关注数据的变化，这可以帮助我们的应用程序更有效地运行。

如何使用它?

当 React 中组件的父组件发生变化时，子组件通常会更新或重新渲染。即使传输给子组件的新数据与旧数据相同，也会发生这种情况。

但是，React 提供了一种优化来避免低效的重新渲染。我们可以创建一个组件，当其父组件更改时，只要它接收的新 props 和状态等于我们拥有的旧数据，它就不会重新渲染。

如果我们在 React 中使用类组件，我们可以通过让我们的组件扩展一个名为"PureComponent"的类来启用此优化。这会告诉 React 仅在其接收的数据实际发生变化时才重新渲染组件。

示例

示例 −计数器应用

在此，我们将使用 PureComponent 创建一个简单的计数器应用，以展示它如何优化渲染 −

因此，我们将有一个扩展 PureComponent 的 Counter 组件。
我们将在 MyApp 组件中显示当前计数值。
每次我们点击"增加"按钮时，计数器都会增加，并且计数器组件在计数 prop 发生变化之前不会更新。
此代码解释了 PureComponent 如何在重新渲染之前检查 prop 值是否已更改，以优化渲染。

import React, { PureComponent, useState } from 'react';

class Counter extends PureComponent {
   render() {
      console.log("Counter was rendered at", new Date().toLocaleTimeString());
      return <div>Count: {this.props.count}</div>;
   }
}
export default function MyApp() {
   const [count, setCount] = useState(0);
   const increment = () => {
      setCount(count + 1);
   };
   return (
      <>
         <button onClick={increment}>Increment</button>
         <Counter count={count} />
      </>
   );
}

输出

示例 − 列表组件

让我们使用 PureComponent 创建另一个 React 应用。在此示例中，我们将有一个使用 PureComponent 呈现项目列表的 ListComponent。我们有一个 ListComponent，它在其状态下维护水果列表。该组件呈现 ListItem 组件列表，每个组件都显示一种水果。我们已将 PureComponent 用于 ListItem 组件，以利用其自动检查 prop 更改的功能。

import React, { PureComponent } from 'react';
class ListItem extends PureComponent {
   render() {
      return <li> {this.props.value}</li>;
   }
}
class ListComponent extends PureComponent {
   constructor(props) {
      super(props);
      this.state = {
         items: ['Apple', 'Banana', 'Orange'],
      };
   }
   render() {
      return (
         <div>
            <h2>Fruit List:</h2>
            <ul> {
               this.state.items.map((item, index) => (
                  <ListItem key={index} value={item} />
               ))
            }
            </ul>
         </div>
      );
   }
}

export default ListComponent;

输出

此示例展示了 PureComponent 在处理列表或项目数组时如何有用，因为它有助于在数据保持不变时避免不必要的重新渲染。

使用 Pure Component 的示例 −

此 React 应用程序由两个组件组成:ParentComponent 和 ChildComponent。此应用程序的主要目标是展示 PureComponent 在优化 React 应用程序中的渲染方面的用途。

import React, { PureComponent } from 'react';

class ChildComponent extends PureComponent {
   render() {
      return <h1>Hello, {this.props.name}!</h1>;
   }
}
class ParentComponent extends PureComponent {
   constructor(props) {
      super(props);
      this.state = {
         name: 'John',
      };
   }   
   render() {
      return <ChildComponent name={this.state.name} />;
   }
}

export default ParentComponent;