元件、Prop 和 State

作為容器，這基本和 HTML 中是一樣的。而像 Roof 和 Wall 這樣的標籤是我們即將定義的自定義標籤/元件。溫馨提示: 上面的程式碼並非實際的 React 程式碼，甚至連 JavaScript 都算不上。暫時，我們只使用這種寬鬆的語法來介紹概念。一旦你理解這些概念後，我們再來學習 JavaScript 的細節並將上述概念轉換成真實程式碼。

為了讓這個例子更容易理解一些，我再簡化一下: 從現在開始，我們來寫一個超級簡單的 Web 應用，連圖片都不用，只顯示文字。

例如，Roof 其實就是一個裡面有文字的 div :

其他元件也是如此，都是隻有文字的 div 而已。首先，我們來看下房子的完整的 React 風格的程式碼:

這沒什麼不好理解的，是吧？House 是由 Roof、Wall、Window 和 Door 組成的，這些都是純文字構成的元件。

最後，React 生成的 HTML 如下所示:

使用 Props 來配置屋頂的顏色

想象一下，我們將規格說明書發給一個工廠，這個工廠負責代工所有的零部件。在規格說明書中，我們可以告訴工廠每個部件的固有屬性，比如屋頂的顏色、門的形狀，等等。在按照我們的要求將屋頂和門生產出來後，它們的屬性不會產生任何變化，屋頂還是藍色的，門依舊是矩形的。這些屬性壓根不會改變。

在 React 裡，我們將這些屬性稱之為 Prop ，即 property 的縮寫。關於 Prop ，你需要記住兩點: 首先，我們來決定 Prop 的值，並在元件構建之前將其作為元件設計的一部分。其次，Prop 的值永遠不會改變。

那 prop 在程式碼中是怎樣的呢？在 House 元件中，如果我們想要藍色屋頂的話，只需在 Roof 元件上新增 “color” 屬性。這就好比是在發給工廠的規格說明書中指定顏色。

這有點類似於給 HTML 標籤新增屬性:

那Roof裡面又是怎麼樣使用 prop 的呢？程式碼如下所示:

就這樣？沒錯！但是有幾點需要注意:

與 props 類似，state 也是元件內部所有狀態值的集合。因此，我們可以在元件定義的模板中使用 state.[something] 。

接下來，我們來新增一些處理使用者輸入的“虛擬碼”來讓門具有互動性。

這裡的關鍵點是元件的 state 是隨時間而變化的。模板的輸出，也就是生成的 HTML 會根據 state 的變化而自動改變。

順便說句，不要忘了上面的只是“虛擬碼”，而不是 React 程式碼。不要嘗試將其複製黏貼到你的專案中！否則你的電腦炸了我不負責……

State 是私有的

元件的 state 是私有的。門無論是開還是關，這都僅僅是門的邏輯。與房子或其他元件沒有任何關係。事實上，我們完全可以將門從房子中移出去，它仍然可以自己開啟或關閉。

因此，門的狀態只有在 Door 元件內部是可見的。在 Door 元件內，我們可以讀取或改寫它的 state 。

總結

好啦，這就是 prop 和 state 。prop 是元件的配置項，它的值是在元件建立之前就已經決定好了，比如門的形狀和屋頂的顏色就可以定義為 prop。prop 的值永遠不會改變。而 state 是元件的私有資料，當元件建立後才可以使用它。比如門的開關狀態可以包括在 state 裡面。state 會隨著一些外部事件的發生而變化。這些所謂的外部事件通常包括：使用者輸入了資料，或者從服務端獲取了資料，又或者是定時器的觸發。

但…是，我們還沒有開發任何實際的東西啊？一個只顯示純文字的應用能有多大用處呢？至少要學到如何建造本文開頭所說的房子吧？介面裡有東西可以點才有用啊？

毫無疑問，要做到這些呢，我們就需要用 JavaScript 程式設計了。這個以後再講吧。如果你不喜歡等待，可以註冊我的課程並通過教學視訊進行學習。