ReactJS - PureComponent 类

---

---

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

语法

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

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

React 中的 PureComponent 只是常规组件的增强版本。它能够执行组件的所有功能。PureComponents 的主要优点是，在重新渲染之前，它会检查以验证属性和状态是否已更改。

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

如何使用它？

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

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

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

例子

示例 - 计数器应用程序

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

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

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 组件的列表，每个组件都显示一个水果。我们已将 PureComponent 用于 ListItem 组件，以利用其自动检查属性更改的功能。

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 在处理项目列表或数组时如何发挥作用，因为它有助于避免在数据保持不变时进行不必要的重新渲染。

示例 - 使用纯组件

这个 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 工具，它改进了我们的应用程序。它确保我们程序的组件仅在必要时更新。这可以帮助我们的软件更有效地运行，并更快地响应用户输入。