前言

React 是 Facebook 里一群牛 X 的碼農(nóng)折騰出的牛X的框架。 實現(xiàn)了一個虛擬 DOM，用 DOM 的方式將需要的組件秒加，用不著的秒刪。本文主要給大家介紹了關(guān)于想用好React的你必須要知道的一些事情，下面話不多說，來一起看看詳細(xì)的介紹：

一、容器性組件（container component）和展示性組件（presentational component）

使用React編寫組件時，我們需要有意識地將組件劃分為容器性組件（container component）和展示性組件（presentational component），這樣有助于我們在編寫組件時，更加明確這個組件應(yīng)該負(fù)責(zé)哪些事情。

容器性組件，負(fù)責(zé)業(yè)務(wù)流程邏輯的處理，如發(fā)送網(wǎng)絡(luò)請求，處理請求數(shù)據(jù)，將處理過的數(shù)據(jù)傳遞給子組件的Props使用。同時，容器性組件提供源數(shù)據(jù)的方法，以Props方式傳遞給子組件，當(dāng)子組件的狀態(tài)變更引起源數(shù)據(jù)的變化時，子組件通過調(diào)用容器性組件提供的方法同步這些變化。

展示性組件，負(fù)責(zé)組件的外表，也就是組件如何渲染，具有很強的內(nèi)聚性。展示性組件不關(guān)心渲染時使用的組件屬性（Props）是如何獲取到的，它只要知道有了這些Props后，組件應(yīng)該如何渲染就足夠了。屬性如何獲取，是容器性組件負(fù)責(zé)的事情。當(dāng)展示性組件狀態(tài)的變化需要同步到源數(shù)據(jù)時，需要調(diào)用容器性組件中的方法，這個方法一般也是通過Props傳遞給展示性組件。

例如，一個Todo項目，有一個Todo組件和一個TodoList組件，Todo組件是一個容器性組件，負(fù)責(zé)從服務(wù)器端獲取待辦事項列表，獲取到待辦事項列表后傳遞給TodoList顯示。當(dāng)在TodoList中新建一項待辦事項后，需要通過TodoList 的 Props，調(diào)用Todo組件中保存待辦項目的方法，將新建的待辦項目同步到服務(wù)器端。

容器性組件和展示性組件可以相互嵌套，一個容器性組件可以包含多個展示性組件和其他的容器性組件；一個展示性組將也可以包含容器性組件和其他的展示性組件。這樣的分工，可以使與組件渲染無直接關(guān)系的邏輯由容器性組件集中負(fù)責(zé)，展示性組件只關(guān)注組件的渲染邏輯，從而使展示性組件更容易被復(fù)用。對于非常簡單的頁面，一般只要一個容器性組件就足夠了；但對于負(fù)責(zé)頁面，則需要多個容器性組件，否則所有的業(yè)務(wù)邏輯都在一個容器性組件中處理的話，會導(dǎo)致這個組件非常復(fù)雜，同時這個組件獲取到的源數(shù)據(jù)，可能需要經(jīng)過很多層的組件Props的傳遞，才能到達最終使用的展示性組件。

二、Props、State和組件的普通屬性

Props、State的概念都很清晰，組件的普通屬性是指在組件中直接掛載到this下的屬性。其實，Props和State也是組件的兩個普通屬性，因為我們可以通過this.props 和 this.state