原文:https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43
当你开始起步学习 React,很快就会接触到组件(Component)的概念,正是这一概念让 React 脱颖而出。创建不同的组件并将它们嵌套在一起,就能构建出一个应用。听起来再简单不过了,但真实情况还会更复杂些。有两种不同类型的组件,称之为 smart 组件和 dumb 组件。
dumb(译注:哑的;无声音的;笨的)组件也叫“展示”组件(presentational components),因为它们只负责表现 DOM。一旦完成了这项工作,也就没什么可做的了。不用时常的去关注它,在页面上放置信息后就算完事儿。
这种组件本身只有一个 render()
方法(他们也用不到其他的),并且总是表现为 Javascript 函数。不用维护内部 state,不用知道当收到请求时如何改变其展现的数据 - 无知便是福。
const Footer = (props) => {
return(
<div>
<ul>
<li>Footer Information</li>
</ul>
</div>
)
}
一个 “hello world” 组件可以被认为是最基础的 dumb 组件,或者网站头尾那种整块的部分。组件被定义一次后,可以在应用中被多次引用;值渲染其核心部分,组件的每个实例看起来都差不多。想要改变其外观的话,只有 props 这一个地方可以着手。简单又直观。
另一方面,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 能被更新。