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