[譯] React 中的 dumb 組件和 smart 組件

原文：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 關注咱們哦