14-React的状态

2.3.1　React的状态

与自定义方法和生命周期方法一起，React类还提供了能够与组件一起持久化的状态（数据）。这来自我提到的支撑实例。状态是个很大的话题——我无法在本章全面介绍它，但现在只需足够了解它以便能让组件可以交互并鲜活起来。状态是什么？从另一个方面来看，状态是某个特定时间事物的信息。例如，通过询问“你今天怎么样？”来了解朋友的“状态”。

有两种基本类型的状态：可变和不可变。思考两者之间区别的一个简单方法是从时间的角度来考虑。事物在创建后是否能够变化？如果可以，它就被称为可变的；如果不行，它就被称为不可变的。关于这些主题有深入的学术研究领域，因此我不打算在这里深入地讲解它们。

React中，那些通过扩展 React.Component 并作为JavaScript类创建的组件可能既有可变状态也有不可变状态，而基于函数创建的组件（无状态函数组件）则只能访问不可变状态（属性）。我会在后续章节中涉及这些主题。现在，我会专注于那些继承自 React.Component 的组件以及状态的获取方法和其他方法。在这些种类的组件中，可以通过类实例的 this.state 属性访问可变状态。而不可变状态则是通过 this.props 进行访问的，我们已经用它创建过静态组件。

不应该在组件内修改 this.props 。我们会在后续章节了解如何为组件提供随时间变化的数据，现在只需知道不能直接改变 this.props 。

你可能在想如何使用React的状态（ state ）和属性（ props ）。答案主要是如何使用传入的数据或者函数内被用到的数据。这包括计算、展示、解析、业务逻辑以及其他数据相关的任务。实际上，属性和状态是在UI中使用动态和静态数据的主要方式（展示用户信息、传递数据给事件处理器等）。

状态和属性是数据的运输工具，这些数据构成应用并使其有用。如果正在创建一个社交网络应用（将在后续章节这么做），常常会组合使用属性和状态构建展示和更新用户信息、更新的内容以及更多的东西的组件。如果正在用React做数据可视化，你可能会将属性和状态作为D3.js这样的可视化库的输入。无论你在构建什么，很可能会在React应用中使用状态和属性来管理和传输信息。

练习2-4　可变与不可变

继续之前，通过思考React中两种主要类型数据之间的区别来检验你对可变和不可变的理解。将下面每个语句标记为真或假。

• 可变意味着数据能够随时间改变。T|F
• 用React中的 this.state 属性访问state。T|F
• props 是React提供的可变对象。T|F
• 不可变数据不会随时间改变。T|F
• 通过 this.props 访问属性。T|F