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