React - State

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

什么是 state？

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

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

状态的简单表示如下 −

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

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

定义 State

React 中的 state 可以与函数组件和 class 组件一起使用。要在组件中使用 state，必须有一个起点，即初始状态。组件的初始状态必须在组件 class 的 constructor 中定义。以下是定义任何 Class 的 state 的语法 −

state = {attribute: "value"};

让我们看一个带有初始状态的 class 组件的示例代码 −

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

创建 State 对象

React 组件有一个内置的 state 对象。state 对象用于存储属于定义该状态的组件的所有属性值。当 state 对象变化时，组件会重新渲染。

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

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