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>
);
}
}
为了更好地理解状态管理，请查看以下章节。
