ReactJS - 状态管理

---

---

状态管理是任何动态应用程序的重要且不可避免的特性之一。React 提供了一个简单灵活的 API 来支持 React 组件中的状态管理。在本章中，让我们了解如何在 React 应用程序中维护状态。

什么是状态？

State 表示给定实例中 React 组件的动态属性的值。React 为每个组件提供了一个动态数据存储。内部数据表示 React 组件的状态，可以使用组件的 this.state 成员变量进行访问。每当组件的状态发生变化时，组件将通过调用 render（） 方法和新状态来重新渲染自身。

为了更好地理解状态管理，一个简单的例子是分析实时时钟组件。时钟组件的主要工作是显示给定实例上位置的日期和时间。由于当前时间每秒都会更改，因此时钟组件应将当前日期和时间保持在其状态。由于时钟组件的状态每秒都在变化，因此时钟的 render（） 方法将每秒调用一次，而 render（） 方法使用其当前状态显示当前时间。

状态的简单表示如下：

让我们在无状态组件一章中创建一个新的时钟组件。

定义状态

React 中的状态可以与函数式和类组件一起使用。要在组件中使用状态，必须存在一个起点，即初始状态。组件的这种初始状态必须在组件类的构造函数中定义。以下是定义任何类的状态的语法 -

 state = {attribute: "value"};

让我们看一下具有初始状态的类组件的示例代码 ：

Class SampleClass extends React.Component
{
	 	 constructor(props)
	 	 {
	 	 	 	 super(props);
	 	 	 	 this.state = { name : "John Doe" };
	 	 }
}

创建状态对象

React 组件有一个内置的状态对象。状态对象用于存储属于定义此状态的组件的所有属性值。当状态对象发生更改时，组件将重新呈现。

让我们看一个示例代码来演示如何在 React 中创建状态对象。

Class BookClass extends React.Component
{
	 	constructor(props)
	 	{
	 	 	 super(props);
	 	 	 this.state = { name : "John Doe" };
	 	}
	 	render() {
	 	 	 return (
	 	 	 <div>
	 	 	 	 	<h1>Name of the Author</h1>
	 	 	 </div>
	 	 	 );
	 	}
}

为了更好地理解状态管理，请查看以下章节。

• 状态管理 API
• 使用 React Hooks 进行状态管理
• 组件生命周期
• 使用 React Hooks 的组件生命周期
• 组件中的布局
• 分页
• Material 用户界面