这是篇文章翻译自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