React 状态

状态是用于包含关于组件的数据或信息的可更新结构。组件中的状态可以随时间变化。随时间变化的状态可以响应用户操作或系统事件发生。具有状态的组件被称为有状态组件。它是 react 组件的核心，它决定了组件的行为以及它将如何渲染。它们还负责使组件具有动态性和交互性。

状态必须尽可能简单。可以使用 setState() 方法设置，调用 setState() 方法会触发 UI 更新。状态表示组件的本地状态或信息。它只能在组件内部或由组件直接访问或修改。要在任何交互发生之前设置初始状态，我们需要使用 getInitialState() 方法。

例如，如果我们有五个需要来自状态的数据或信息的组件，那么我们需要创建一个容器组件，它将为所有这些组件保留状态。

定义状态

要定义状态，您首先必须声明一组默认值，以定义组件的初始状态。为此，添加一个类构造函数，该构造函数使用 this.state 分配初始状态。'this.state' 属性可以在 render() 方法内部渲染。

示例

下面的示例代码展示了如何使用 ES6 语法创建一个有状态组件。

要设置状态，需要在构造函数中调用 super() 方法。这是因为在 super() 方法被调用之前，this.state 未初始化。

输出

更改状态

我们可以使用 setState() 方法更改组件状态，并将新的状态对象作为参数传递。现在，在上面的示例中创建一个新方法 toggleDisplayBio()，并将此关键字绑定到 toggleDisplayBio() 方法，否则我们无法在 toggleDisplayBio() 方法内部访问 this。

示例

在此示例中，我们将向 render() 方法添加一个 button。单击此按钮会触发 toggleDisplayBio() 方法，该方法显示所需的输出。

输出

当您单击 阅读更多 按钮时，您将获得以下输出，当您单击 显示较少 按钮时，您将获得如上图所示的输出。