ReactJS - PureComponent 类

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

语法

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

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

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

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

如何使用它？

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

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

如果我们在 React 中使用类组件，我们可以通过使我们的组件扩展名为“PureComponent”的类来启用此优化。这告诉 React 只有当它接收到的数据实际发生更改时才重新渲染组件。

示例

示例 - 计数器应用

在此，我们将使用 PureComponent 创建一个简单的计数器应用程序来演示它如何优化渲染：

• 因此，我们将有一个扩展 PureComponent 的 Counter 组件。

• 我们将在 MyApp 组件中显示当前计数值。

• 每次我们点击“递增”按钮时，计数器都会递增，并且计数器组件只有在 count 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 应用。在这个示例中，我们将有一个 ListComponent，它使用 PureComponent 渲染项目列表。我们有一个 ListComponent，它在其状态中维护一个水果列表。该组件渲染一系列 ListItem 组件，每个组件显示一个水果。我们已为 ListItem 组件使用 PureComponent 来利用其自动检查 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 如何有用，因为它有助于避免在数据保持不变时不必要的重新渲染。

示例 - 使用 PureComponent

此 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;

输出

总结

PureComponent 是一个改进我们应用程序的 React 工具。它确保我们的程序中的组件仅在必要时更新。这可以帮助我们的软件更有效地运行并更快地响应用户输入。