学习如何管理应用程序中的状态对于存储和向用户提供数据至关重要。了解React中的状态管理基础知识。
在之前的文章中，我们学习了如何正确使用JSX以及React组件如何相互通信。然而，我们仍然没有涉及到另一个非常重要的问题：存储应用程序关心的信息的位置。今天我们在讨论React中的应用程序状态管理。
处理应用程序状态有很多种方法，但首先让我们看看最简单的一个组件状态。
反应组分状态
你可能以前见过this.state。一个组件有其本地状态，一个目的是保持组件的重要信息，比如你应该渲染的电影列表。这个本地状态在构造函数中初始化，如下所示：
constructor() {
super();
this.state = {
itemKey: defaultItemValue,
...
};
}
请记住，即使初始值为，您应该为组件中使用的每个状态属性定义默认值undefined。
我应该在组件状态中存储什么？关于什么时候使用组件状态以及何时转向更高级的方法存在争议：过去许多开发人员都在强迫你根本不应该使用的哲学this.state，但是你应该让所有东西都处于全局可访问状态（即redux状态 - 稍后会提到），即使它只是一个用于条件呈现的简单切换。
但是，如果仅在这个组件内使用redux状态，则没有任何意义; 如果正在开发的应用程序非常简单，则不需要像状态管理的单独库那样引入另一个依赖项。在开始学习React时，最好坚持使用this.state，因为它不需要潜入另一个图书馆。
React组件状态是异步更新的。您将使用该 this.setState功能更新您的状态。然而，有一点需要时刻牢记：setState当一个setState依赖于前一个setState时，由于它的异步特性，您不应该连续使用两次。
// assuming this.state.count === 0
this.setState({
count: this.state.count + 1
});
this.setState({
count: this.state.count + 1
});
// it doesn't necessarily mean that this.state.count will be 2 now
但是，您可以使用所谓的功能setState来设置依赖于以前的状态或某些 组件的道具的状态：
this.setState((previousState, currentProps) => {
return {
count: previousState.count + 1,
};
});
使用功能setState是使用setState 的最佳方法。如果您想更改保存在状态中的多个值，则不需要setState 多次调用 ：
// "standard" way
this.setState({
item1: value1,
item2: value2,
});
// "functional" way
this.setState((previousState, currentProps) => {
return {
item1: value1,
item2: value2,
};
});
状态不应该发生变异。这既适用于简单组件的状态，也适用于一些稍微高级的组件，如第三方复位状态。组件的状态只能通过使用该setState功能来更改 。虽然您可以使用this.state.disabled = true，但不会触发组件的重新渲染。没有预防在该州保存的变异项目，所以你必须小心不要变异他们自己。
到目前为止，我们已经介绍了React组件状态及其三个基本概念：它是不可变的，异步的和本地的。这是一种处理简单应用程序中存储信息的快速方法，也适用于应该从组件实例中的多个位置访问的局部变量，即使在真正大而复杂的应用程序中也是如此。
但是，对于更复杂的应用程序，对于过于依赖彼此状态的组件以及为了更好地处理应用程序所使用的数据，还有第三方库（如Redux，Flux，CerebralJS等），它们提供更高级的方式来处理应用程序状态。我们下一次会再谈这些。
閱讀更多 愛碼農 的文章
