(翻译)Presentational and Container Components

这是篇文章翻译自medium的：Presentational and Container Components

译者语：
这篇文章是紧接着对我上一篇翻译的扩充，对Container Component模式描述的更加细，解决了我不少开发中的困惑。

Presentational and Container Components

在我写React程序的时候，我发现一个模式很是的好用。对React有必定经验的人，确定已经对这个模式有过了解。这篇文章已经作了很好的介绍，可是在这里我想要再补充几点。
当你把你的组件分红两种不一样的类型，你会发现他们会很是容易复用和理解。这两种类型，我称为Container and Presentational components(译者：可翻译为容器和展现组件，由于社区中常以英文名字出现，因此不翻译)。固然，我也听过Fat and Skinny, Smart and Dumb, Stateful and Pure, Screens and Components等等，这些东西虽然不彻底相同，可是他们的中心思想是同样的。

Presentational components:

• 关注于该怎样展示

• 中间或许会包含presentational和container组件，同时也能够包含本身的一些JSX代码和样式代码

• 容许经过this.props.children来传递内容

• 不和app的其余地方产生依赖关系，好比没有Flux的actions、stores

• 不关注数据是怎么加载和处理的

• 只经过props来获取数据和回掉函数

• 通常没有本身的state(即便有，也只是UI状态，而不是数据)

• 除非组件须要state，生命周期或者性能优化，可使用functional components的方式进行声明

• 举个栗子：Page, Sidebar, Story, UserInfo, List

Container components:

• 关注与该怎么运行

• 中间能够包含presentational和container组件，除非包裹用的div的一些样式，通常不会含有任何样式

• 向包含的presentational和其余的container components传递数据和行为方法

• 调用Flux的actions或者把这些actions做为回掉函数传给presentational components

• 因为他们常常做为数据来源的角色，因此container通常会包含state

• 通常会由更高等级的components来生成，好比React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()

• 举个栗子：UserPage, FollowersSidebar, StoryContainer, FollowedUserList

一般，我会把它们放到不一样的文件夹下面，以便区分。

这么作的好处

• 职责分离。这样你会更容易理解你的app和UI。

• 更易复用。同一个presentational component，也能够被用在不一样的数据源下。

• presentational component能够做为一个“调色板”。你能够把它放在一个页面上，让设计师在不须要知道app逻辑的状况下，随意改变相关变量。

• 这样作能够强迫你写一些“布局组件”，好比Sidebar, Page, ContextMenu，而后经过this.props.children来传递内容，而不是在不一样的container中写一大堆相同的代码。

为何要使用Containers

我首先建议你先不使用这个模式来搭建你的app，最后发现你会传递太多的props给中间组件。对于不少中间组件来讲，他们并不须要这些props，可是他们还必须传递给下一级组件。同时，若是下级组件须要增长一个数据，那么你就须要一路修改到最上面。这个时候，就是你须要引入Container and Presentational component的时候。这样子根组件就能够得到须要的数据和行为方法，而不会去修改那些没有关系的中间组件。
不要指望你刚开始就能把两种组件作出正确的区分。当你得到更多的经验，你就会知道该何时用container何时用presentational组件，就像你知道何时要声明一个function同样。这个免费的教程能够帮助你。

一些词汇

你须要明白，container和presentational components的不一样并非技术上的不一样，而是目的上的不一样。

做为对比，这里列出一些词汇：

• Stateful and Stateless 有一些组件使用React.setState()方法，有些不须要用。Container更倾向于Stateful，而Presentational更倾向于Stateless，固然这并非绝对的。Presentational可使Stateless，Container也能够是Stateful

• Classes and Functions 一个组件能够经过class和function进行声明。Functional components更简洁一些，他们缺乏不少class含有的功能。这些或许之后会有改变，可是如今确实存在。因为functional components比较容易理解，因此我建议你使用functional components, 除非你须要state, 生命周期和性能优化这些只有class开放的功能.

• Pure and Impure若是相同的props和state，会返回相同的结果，那么这个component就是pure的。Pure组件能够用class或function来声明，他也能够是stateful的，也能够是stateless的。另一个重要的区别是，pure组件并不依赖于深层的props和state，因此他们能够经过在shouldComponentUpdate()中浅层对比来进行优化。如今这个方法只在class中存在，或许之后会加入到function中。

Presentational和Container组件均可以是任意的一种状态。根据个人经验，presentational组件倾向于stateles pure functions, 而container更倾向于stateful pure classes。固然这只是基于观察得出的结果，我也曾经看到过彻底不一样的状况。
记住，不要把presentational和container区分的那么明显。有的时候很难去画出一个分界线来。若是你不肯定一个组件应该是presentational仍是container，那么或许还太早去区分它。

结束语

在早期的文章中，我说presentaional container只能包含presentational components。如今我并不这么认为。

---

这是篇文章翻译自medium的：Presentational and Container Components