在上一節(jié)中我們學(xué)習了如何使用React的props來改變組件（UI）以及如何在React中使用props。愛掏網(wǎng) - it200.com除了props可以改變組件之外還可以通過React的state，而且state也是React的重要概念和必須掌握的知識之一。愛掏網(wǎng) - it200.com通過上一節(jié)的學(xué)習，我們了解到props是純靜態(tài)的改變UI，而今天要聊的state是動態(tài)的，讓你的組件真的能動起來，可以讓用戶和你的產(chǎn)品進行交互。愛掏網(wǎng) - it200.com用戶和你的應(yīng)用程序的每次交互都有可能更改state，從而導(dǎo)致對應(yīng)的UI更改（或內(nèi)容的重新渲染）。愛掏網(wǎng) - it200.com

如果你從未接觸過或者想學(xué)習這方面的知識的話，歡迎繼續(xù)往下閱讀。愛掏網(wǎng) - it200.com

通過對props的學(xué)習我們知道可以通過props給組件透傳值，從而更改UI效果。愛掏網(wǎng) - it200.com比如上節(jié)中提到的房子案例：

整個房子是一個組件，它由房頂（）、墻（）、門（）和窗戶（）。愛掏網(wǎng) - it200.com每個組件都有自己的props，比如，Roof有roofSrc（房頂圖片）和color（改變房頂?shù)念伾?b class="xhide">愛掏網(wǎng) - it200.com在使用的時候，可以通過color這個props來改變房頂?shù)念伾ㄕ缟蠄D你所看到的，有blue、red和salmon等）。愛掏網(wǎng) - it200.com

就房子這個示例而言，Roof、Wall是靜態(tài)的（你總不可能隨意去拆了房頂和墻重建吧），但Door和Window是可以具有交互的（人可以打開門或窗戶，這是很正常的形為）。愛掏網(wǎng) - it200.com如果把這個House拿到Web應(yīng)用程序來說，Roof和Wall是不具交互性的，僅僅是展示而以；但Door和Window是具有交互性的，可以根據(jù)用戶的操作行為做出相應(yīng)的變更。愛掏網(wǎng) - it200.com

在上面的示例，我們看到House有打開門的，也有關(guān)閉門的兩個效果。愛掏網(wǎng) - it200.com只不過上面的示例是通過給Door組件傳遞了兩個不同的圖片（props是同一個）。愛掏網(wǎng) - it200.com具體代碼如下：

這是純靜態(tài)展示，但我們應(yīng)該給Web應(yīng)用程序（房子House）賦予更強大的靈魂，讓應(yīng)用程序能和自己的用戶交互起來。愛掏網(wǎng) - it200.com也就是說，房子的門應(yīng)該是由用戶的操作來完成的。愛掏網(wǎng) - it200.com比如說，用戶點了一下門（有可能觸發(fā)了一個click事件），門就打開了，用戶再點一下門，門又關(guān)閉了。愛掏網(wǎng) - it200.com那么在React中要實現(xiàn)這樣的一個效果，我們不能僅依賴于props來完成了。愛掏網(wǎng) - it200.com我們需要借助React的state來完成這樣的功能。愛掏網(wǎng) - it200.com

換句話說，如果React的props持有不可變的數(shù)據(jù)來改變組件渲染的話，那么state將存儲關(guān)于組件的數(shù)據(jù)，這些數(shù)據(jù)可能會隨時間變化。愛掏網(wǎng) - it200.com數(shù)據(jù)的變化可以以用戶操作（事件），比如用戶鼠標點擊了一下左鍵，用戶鍵盤按下了（具體的可以看看React中的事件一文）等。愛掏網(wǎng) - it200.com在React中處理組件的狀態(tài)通常會涉及組件的默認狀態(tài)、訪問當前狀態(tài)和更新狀態(tài)。愛掏網(wǎng) - it200.com

比如上面講到的房子這個組件，我們就可以通過state來讓用戶具有可操作性（開門和關(guān)門之間切換）。愛掏網(wǎng) - it200.com

還是拿來舉例，看看在React中怎么使用state。愛掏網(wǎng) - it200.com在使用state之前首要做的第一件事情就是初始化state數(shù)據(jù)，然后才能在render()中使用它。愛掏網(wǎng) - it200.com為了設(shè)置初始狀態(tài)，在構(gòu)造函數(shù)constructor中使用this.state來初始化state。愛掏網(wǎng) - it200.com如果你從父組件獲取邏輯的話，一定要調(diào)用super()方法：

class House extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            // ...
        }
    }

    render() { 
        // ...
    }
}

上面是使用class創(chuàng)建組件時聲明state的方法，如果我們使用函數(shù)組件或者現(xiàn)在流行的React Hooks的話，使用方式會略有不同，這里暫時不表，后續(xù)會和大家一起學(xué)習和探討怎么在React Hooks中使用props和state。愛掏網(wǎng) - it200.com

在設(shè)置初始狀態(tài)時我們可以添加邏輯，比如上面的示例中，設(shè)置了isOpen的初始值：

class House extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isOpen: false
        }
    }

    render() { 
        // ...
    }
}

通常在使用類創(chuàng)建組件時會調(diào)用constructor()構(gòu)造函數(shù)。愛掏網(wǎng) - it200.com大多數(shù)情況下，當調(diào)用constructor()時，super()方法是在構(gòu)造函數(shù)內(nèi)部調(diào)用的，否則父類的構(gòu)造函數(shù)將不會執(zhí)行。愛掏網(wǎng) - it200.com另外this.state必須是一個對象。愛掏網(wǎng) - it200.com

如果要更新狀態(tài)的話，需要使用this.setState(data, callback)方法。愛掏網(wǎng) - it200.com調(diào)用此方法時，React將data與當前狀態(tài)合并并調(diào)用render()。愛掏網(wǎng) - it200.com然后，React調(diào)用callback。愛掏網(wǎng) - it200.com

在setState()中使用回調(diào)非常重要，因為這些方法是異步執(zhí)行的。愛掏網(wǎng) - it200.com你可以使用回調(diào)來確保在使用新狀態(tài)之前它是可用的。愛掏網(wǎng) - it200.com如果你依賴一個新狀態(tài)，而不等setState()完成其工作，那么你將同步地處理異步操作，這意味著當前狀態(tài)仍然是舊狀態(tài)時，可能會出現(xiàn)錯誤。愛掏網(wǎng) - it200.com

此值的變化取決于從何處調(diào)用函數(shù)。愛掏網(wǎng) - it200.com與我們的組件相關(guān)的上下文被綁定到this，以確保它與我們的組件是同步的。愛掏網(wǎng) - it200.com

class Hous