在上一節中我們學習了如何使用React的props來改變組件（UI）以及如何在React中使用props。愛掏網 - it200.com除了props可以改變組件之外還可以通過React的state，而且state也是React的重要概念和必須掌握的知識之一。愛掏網 - it200.com通過上一節的學習，我們了解到props是純靜態的改變UI，而今天要聊的state是動態的，讓你的組件真的能動起來，可以讓用戶和你的產品進行交互。愛掏網 - it200.com用戶和你的應用程序的每次交互都有可能更改state，從而導致對應的UI更改（或內容的重新渲染）。愛掏網 - it200.com
如果你從未接觸過或者想學習這方面的知識的話，歡迎繼續往下閱讀。愛掏網 - it200.com
通過對props的學習我們知道可以通過props給組件透傳值，從而更改UI效果。愛掏網 - it200.com比如上節中提到的房子案例：
整個房子是一個props，比如，Roof有roofSrc（房頂圖片）和color（改變房頂的顏色）。愛掏網 - it200.com在使用的時候，可以通過color這個props來改變房頂的顏色（正如上圖你所看到的，有blue、red和salmon等）。愛掏網 - it200.com
就房子這個示例而言，Roof、Wall是靜態的（你總不可能隨意去拆了房頂和墻重建吧），但Door和Window是可以具有交互的（人可以打開門或窗戶，這是很正常的形為）。愛掏網 - it200.com如果把這個House拿到Web應用程序來說，Roof和Wall是不具交互性的，僅僅是展示而以；但Door和Window是具有交互性的，可以根據用戶的操作行為做出相應的變更。愛掏網 - it200.com
在上面的示例，我們看到House有打開門的，也有關閉門的兩個效果。愛掏網 - it200.com只不過上面的示例是通過給Door組件傳遞了兩個不同的圖片（props是同一個）。愛掏網 - it200.com具體代碼如下：
這是純靜態展示，但我們應該給Web應用程序（房子House）賦予更強大的靈魂，讓應用程序能和自己的用戶交互起來。愛掏網 - it200.com也就是說，房子的門應該是由用戶的操作來完成的。愛掏網 - it200.com比如說，用戶點了一下門（有可能觸發了一個click事件），門就打開了，用戶再點一下門，門又關閉了。愛掏網 - it200.com那么在React中要實現這樣的一個效果，我們不能僅依賴于props來完成了。愛掏網 - it200.com我們需要借助React的state來完成這樣的功能。愛掏網 - it200.com
換句話說，如果React的props持有不可變的數據來改變組件渲染的話，那么state將存儲關于組件的數據，這些數據可能會隨時間變化。愛掏網 - it200.com數據的變化可以以用戶操作（事件），比如用戶鼠標點擊了一下左鍵，用戶鍵盤按下了（具體的可以看看React中的事件一文）等。愛掏網 - it200.com在React中處理組件的狀態通常會涉及組件的默認狀態、訪問當前狀態和更新狀態。愛掏網 - it200.com
比如上面講到的房子這個組件，我們就可以通過state來讓用戶具有可操作性（開門和關門之間切換）。愛掏網 - it200.com
還是拿state。愛掏網 - it200.com在使用state之前首要做的第一件事情就是初始化state數據，然后才能在render()中使用它。愛掏網 - it200.com為了設置初始狀態，在構造函數constructor中使用this.state來初始化state。愛掏網 - it200.com如果你從父組件獲取邏輯的話，一定要調用super()方法：
class House extends React.Component {
constructor(props) {
super(props)
this.state = {
// ...
}
}
render() {
// ...
}
}
上面是使用class創建組件時聲明state的方法，如果我們使用函數組件或者現在流行的React Hooks的話，使用方式會略有不同，這里暫時不表，后續會和大家一起學習和探討怎么在React Hooks中使用props和state。愛掏網 - it200.com
在設置初始狀態時我們可以添加邏輯，比如上面的示例中，設置了isOpen的初始值：
class House extends React.Component {
constructor(props) {
super(props)
this.state = {
isOpen: false
}
}
render() {
// ...
}
}
通常在使用類創建組件時會調用constructor()構造函數。愛掏網 - it200.com大多數情況下，當調用constructor()時，super()方法是在構造函數內部調用的，否則父類的構造函數將不會執行。愛掏網 - it200.com另外this.state必須是一個對象。愛掏網 - it200.com
如果要更新狀態的話，需要使用this.setState(data, callback)方法。愛掏網 - it200.com調用此方法時，React將data與當前狀態合并并調用render()。愛掏網 - it200.com然后，React調用callback。愛掏網 - it200.com
在setState()中使用回調非常重要，因為這些方法是異步執行的。愛掏網 - it200.com你可以使用回調來確保在使用新狀態之前它是可用的。愛掏網 - it200.com如果你依賴一個新狀態，而不等setState()完成其工作，那么你將同步地處理異步操作，這意味著當前狀態仍然是舊狀態時，可能會出現錯誤。愛掏網 - it200.com
此值的變化取決于從何處調用函數。愛掏網 - it200.com與我們的組件相關的上下文被綁定到this，以確保它與我們的組件是同步的。愛掏網 - it200.com
class Hous