ReactJS - 状态管理

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

什么是状态？

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

一个简单的示例来更好地理解状态管理是分析一个实时时钟组件。时钟组件的主要工作是在给定实例时显示某个位置的日期和时间。由于当前时间每秒都会变化，因此时钟组件应在其状态中维护当前日期和时间。由于时钟组件的状态每秒都会发生变化，因此时钟的 render() 方法将每秒被调用一次，并且 render() 方法将使用其当前状态显示当前时间。

状态的简单表示如下所示：

{ 
   date: '2020-10-10 10:10:10' 
}

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

定义状态

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 UI