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/)