當前位置:
首頁 > 最新 > 組件、Prop和State

組件、Prop和State

英文:Linton Ye 譯文:鄭豐彧

https://zhuanlan.zhihu.com/p/41398296

蓋房子

要想理解這些概念是什麼以及如何使用它們,我們先來寫一個小示例。就蓋個房子如何?

組件

如果你還記得我們在前面文章中所討論過的,組件的概念是 React 的三大支柱之一。使用 React 開發應用基本都是在使用組件。

第一步是將 UI 分解成多個組件。例如,我們可以這樣來拆分房子:

現在來編碼!

等一下,怎麼看起來這麼像 HTML ?沒錯!React 的部分代碼看上去就是非常像 HTML ,其實就是這樣設計的,這是為了讓 Web 設計師理解和編寫 React 代碼更容易一些。太貼心了!

因此,在上面的代碼中,我們使用

作為容器,這基本和 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 的呢?代碼如下所示:

就這樣?沒錯!但是有幾點需要注意:

定義組件的 HTML 風格代碼是一個模板,而不是單純的 HTML 標籤。這意味著我們可以在其中放置佔位符來改變 HTML 輸出的內容,而不必重複編寫不同的 HTML (還記得 Domo 的帽子嗎?這就是佔位符的概念!)。在這個示例中, 生成的 HTML 是

blue roof

,而 生成的是

red roof

,以此類推。

模板中使用的花括弧告訴 React 我們要在此處使用佔位符來替代純文本。

props 可以看作是 Roof 組件所有屬性值的集合。假設組件是這樣使用的: ,那麼在 Roof 組件的定義中就可以使用 props.color 和 props.material 。

使用 State 來開門為組件添加 State

組件還可以擁有 state 。那麼什麼是 state ?state 是一種可以在組件創建後更改的數據。

舉個例子,門既可以開,又可以關。我們可以說門的狀態就是 state ,因為它的值是可以在門創建後更改的。在這點上,state 與 prop 是不同的,prop 是不會改變的,比如門的形狀。

狀態值的改變通常是由外部事件所引起的。在 Web 應用中,這些所謂的外部事件通常包括:用戶輸入了數據,或者從服務端獲取了數據,又或者是定時器的觸發。

下面,我們來為門添加 state :

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

接下來,我們來添加一些處理用戶輸入的「偽代碼」來讓門具有交互性。

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

順便說句,不要忘了上面的只是「偽代碼」,而不是 React 代碼。不要嘗試將其複製黏貼到你的項目中!否則你的電腦炸了我不負責……

State 是私有的

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

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

總結

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

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

【關於投稿】

如果大家有原創好文投稿,請直接給公號發送留言。

① 留言格式:

【投稿】+《 文章標題》+ 文章鏈接

② 示例:

【投稿】《不要自稱是程序員,我十多年的 IT 職場總結》:http://blog.jobbole.com/94148/

③ 最後請附上您的個人簡介哈~

覺得本文對你有幫助?請分享給更多人

關注「前端大全」,提升前端技能


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 前端大全 的精彩文章:

關於 Vue和React 區別的一些筆記

TAG:前端大全 |