Dumb元件：在react中，只會接收props，根據props進行渲染的元件稱為Dumb元件。

                    Dumb元件不依賴除了React.js和Dumb元件以外的內容，Dumb元件是最純粹的，可複用性最好的元件。

Smart元件：單靠Dumb元件無法構建應該程式，因為它們除props外，不依賴其他外部的內容，因而無法獲取資料。這就需要另一種元件，它們非常“聰明”，專門從事資料相關的應用邏輯，如與Ajax互動等，這種元件稱為Smart元件。

Dumb元件與Smart元件的關係：Smart元件負責資料相關的應用邏輯，將獲取到的資料通過props傳遞給Dumb元件，Dumb負責UI的呈現。

Smart元件一般作為Dumb元件的父元件，如下圖：

舉一個簡單的例子：TableShow是一個顯示錶資料的Dumb元件，TableShowContainer是一個Smart元件，負責與後臺進行資料互動，將接收到的資料傳遞給TableShow，再由TableShow渲染到頁面。

你也許會問，那我直接由Smart元件獲取到資料後直接渲染到頁面不就行了，為什麼還要再傳遞給一個Dumb元件。

確實Smart元件可以包含Dumb元件，將資料直接渲染到頁面。但是Dumb元件的目的是為了高度複用。

假設一種場景，SmartA與SmartB是兩個實現不同業務功能的元件，它們都可以對Table資料進行更新。如果直接在Smart元件中進行渲染，那麼同一段渲染Table的程式碼，需要在兩個Smart元件中分別寫一遍。如果我們將渲染Table這一操作抽離成一個Dumb元件，那麼只需要在SmartA獲取到後臺更新資料時，將資料通過props傳給Dumb元件，即可實現Tabke資料的更新，SmartB同理。

不止是大的專案需要嚴格且有邏輯的元件層劃分，在平時的學習以及練習中，應養成一種好的邏輯思維，讓它變成一種習慣，才不會手忙腳亂。

歡迎指正，互相進步。