[译] 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 关注我们哦