[譯] 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 關注我們哦