原文：https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43
當你開始起步學習 React，很快就會接觸到元件（Component）的概念，正是這一概念讓 React 脫穎而出。建立不同的元件並將它們巢狀在一起，就能構建出一個應用。聽起來再簡單不過了，但真實情況還會更復雜些。有兩種不同型別的元件，稱之為 smart 元件和 dumb 元件。
Dumb Components
dumb（譯註：啞的；無聲音的；笨的）元件也叫“展示”元件（presentational components），因為它們只負責表現 DOM。一旦完成了這項工作，也就沒什麼可做的了。不用時常的去關注它，在頁面上放置資訊後就算完事兒。
這種元件本身只有一個 render() 方法（他們也用不到其他的），並且總是表現為 Javascript 函式。不用維護內部 state，不用知道當收到請求時如何改變其展現的資料 – 無知便是福。
const Footer = (props) => {
return(
<div>
<ul>
<li>Footer Information</li>
</ul>
</div>
)
}
複製程式碼一個 “hello world” 元件可以被認為是最基礎的 dumb 元件，或者網站頭尾那種整塊的部分。元件被定義一次後，可以在應用中被多次引用；值渲染其核心部分，元件的每個例項看起來都差不多。想要改變其外觀的話，只有 props 這一個地方可以著手。簡單又直觀。
Smart Components
另一方面，smart（譯註：adj. 聰明的；巧妙的；敏捷的）元件有著不同的職責，也成為容器元件（container components）。因為揹負了靈巧之名，它們必須得關注 state 並留意應用是如何工作的。
根據容器設計模式（the container design pattern），容器元件和展示元件被分開設計並各司其職。容器元件需要管理自身繁複的生命週期，並負責將資料作為 props，向下傳遞給展示型元件。
smart 元件是基於類的，並在 constructor() 函式中定義自身的 state。
class App extends Component {
constructor(props){
super(props);
this.state = {pictures : []};
}
}
複製程式碼此類元件也經常包含其他回撥函式，用於升級 state 並變成 props 傳遞給子元件。
應用的根元件就是一個很好的 smart 元件範例，經常負責管理整個應用的若干個 state 的片段，並需要將附加的功能下發到其子元件，從而實現使用者互動時 state 能被更新。
長按二維碼或搜尋 fewelife 關注我們哦