ReactJS – 状态管理

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

什么是状态?

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

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

状态的简单表示如下 –

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

让我们在本章后面创建一个新的时钟组件。

这里,

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