state 和 props 都是普通的 JavaScript 对象。虽然它们都保存着影响渲染输出的信息，但它们在组件方面的功能不同。Props 以类似于函数参数的方式传递给组件，而状态则类似于在函数内声明变量并对它进行管理。 States vs Props | Conditions | States | Props | | --- | --- | --- | | 可从父组件接收初始值 | 是 | 是 | | 可在父组件中改变其值 | 否 | 是 | | 在组件内设置默认值 | 是 | 是 | | 在组件内可改变 | 是 | 否 | | 可作为子组件的初始值 | 是 | 是 | 1. ## 我们为什么不能直接更新状态? 如果你尝试直接改变状态，那么组件将不会重新渲染。 ~~~js //Wrong this.state.message = 'Hello world' ~~~ 正确方法应该是使用`setState()`方法。它调度组件状态对象的更新。当状态更改时，组件通将会重新渲染。 ~~~js //Correct this.setState({ message: 'Hello World' }) ~~~ **注意：**你可以在*constructor*中或使用最新的 JavaScript 类属性声明语法直接设置状态对象。 2. ## 回调函数作为`setState()`参数的目的是什么? 当 setState 完成和组件渲染后，回调函数将会被调用。由于`setState()`是异步的，回调函数用于任何后续的操作。 **注意：**建议使用生命周期方法而不是此回调函数。 ~~~js setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered')) ~~~ 阅读资源： 1. [掘金 - 揭密React setState](https://juejin.im/post/5b87d14e6fb9a01a18268caf) 2. [setState 如何知道该做什么?](https://overreacted.io/zh-hans/how-does-setstate-know-what-to-do/)