状态管理是任何动态应用程序的重要且不可避免的特性之一。React 提供了一个简单灵活的 API 来支持 React 组件中的状态管理。在本章中,让我们了解如何在 React 应用程序中维护状态。
什么是状态?
State 表示给定实例中 React 组件的动态属性的值。React 为每个组件提供了一个动态数据存储。内部数据表示 React 组件的状态,可以使用组件的 this.state 成员变量进行访问。每当组件的状态发生变化时,组件将通过调用 render() 方法和新状态来重新渲染自身。
为了更好地理解状态管理,一个简单的例子是分析实时时钟组件。时钟组件的主要工作是显示给定实例上位置的日期和时间。由于当前时间每秒都会更改,因此时钟组件应将当前日期和时间保持在其状态。由于时钟组件的状态每秒都在变化,因此时钟的 render() 方法将每秒调用一次,而 render() 方法使用其当前状态显示当前时间。
状态的简单表示如下:
{
date: '2020-10-10 10:10:10'
}
date: '2020-10-10 10:10:10'
}
让我们在无状态组件一章中创建一个新的时钟组件。
定义状态
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>
);
}
}
为了更好地理解状态管理,请查看以下章节。