React中的state
React中的state
在上一节中我们学习了如何使用React的props来改变组件（UI）以及如何在React中使用props。除了props可以改变组件之外还可以通过React的state，而且state也是React的重要概念和必须掌握的知识之一。通过上一节的学习，我们了解到props是纯静态的改变UI，而今天要聊的state是动态的，让你的组件真的能动起来，可以让用户和你的产品进行交互。用户和你的应用程序的每次交互都有可能更改state，从而导致对应的UI更改（或内容的重新渲染）。
如果你从未接触过或者想学习这方面的知识的话，欢迎继续往下阅读。
state的解释
通过对props的学习我们知道可以通过props给组件透传值，从而更改UI效果。比如上节中提到的房子案例：
整个房子是一个<House />组件，它由房顶（<Roof />）、墙（<Wall />）、门（<Door />）和窗户（<Window />）。每个组件都有自己的props，比如，Roof有roofSrc（房顶图片）和color（改变房顶的颜色）。在使用的时候，可以通过color这个props来改变房顶的颜色（正如上图你所看到的，有blue、red和salmon等）。
就房子这个示例而言，Roof、Wall是静态的（你总不可能随意去拆了房顶和墙重建吧），但Door和Window是可以具有交互的（人可以打开门或窗户，这是很正常的形为）。如果把这个House拿到Web应用程序来说，Roof和Wall是不具交互性的，仅仅是展示而以；但Door和Window是具有交互性的，可以根据用户的操作行为做出相应的变更。
在上面的示例，我们看到House有打开门的，也有关闭门的两个效果。只不过上面的示例是通过给Door组件传递了两个不同的图片（props是同一个）。具体代码如下：
这是纯静态展示，但我们应该给Web应用程序（房子House）赋予更强大的灵魂，让应用程序能和自己的用户交互起来。也就是说，房子的门应该是由用户的操作来完成的。比如说，用户点了一下门（有可能触发了一个click事件），门就打开了，用户再点一下门，门又关闭了。那么在React中要实现这样的一个效果，我们不能仅依赖于props来完成了。我们需要借助React的state来完成这样的功能。
换句话说，如果React的props持有不可变的数据来改变组件渲染的话，那么state将存储关于组件的数据，这些数据可能会随时间变化。数据的变化可以以用户操作（事件），比如用户鼠标点击了一下左键，用户键盘按下了（具体的可以看看React中的事件一文）等。在React中处理组件的状态通常会涉及组件的默认状态、访问当前状态和更新状态。
比如上面讲到的房子这个组件，我们就可以通过state来让用户具有可操作性（开门和关门之间切换）。
React的state如何使用
还是拿<House />来举例，看看在React中怎么使用state。在使用state之前首要做的第一件事情就是初始化state数据，然后才能在render()中使用它。为了设置初始状态，在构造函数constructor中使用this.state来初始化state。如果你从父组件获取逻辑的话，一定要调用super()方法：
class House extends React.Component {
constructor(props) {
super(props)
this.state = {
// ...
}
}
render() {
// ...
}
}
上面是使用class创建组件时声明state的方法，如果我们使用函数组件或者现在流行的React Hooks的话，使用方式会略有不同，这里暂时不表，后续会和大家一起学习和探讨怎么在React Hooks中使用props和state。
在设置初始状态时我们可以添加逻辑，比如上面的示例中，设置了isOpen的初始值：
class House extends React.Component {
constructor(props) {
super(props)
this.state = {
isOpen: false
}
}
render() {
// ...
}
}
通常在使用类创建组件时会调用constructor()构造函数。大多数情况下，当调用constructor()时，super()方法是在构造函数内部调用的，否则父类的构造函数将不会执行。另外this.state必须是一个对象。
如果要更新状态的话，需要使用this.setState(data, callback)方法。调用此方法时，React将data与当前状态合并并调用render()。然后，React调用callback。
在setState()中使用回调非常重要，因为这些方法是异步执行的。你可以使用回调来确保在使用新状态之前它是可用的。如果你依赖一个新状态，而不等setState()完成其工作，那么你将同步地处理异步操作，这意味着当前状态仍然是旧状态时，可能会出现错误。
此值的变化取决于从何处调用函数。与我们的组件相关的上下文被绑定到this，以确保它与我们的组件是同步的。
class Hous