(翻译)Presentational and Container Components

Clark

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

阅读 4.1k

Clark's Blog
记录一些自己平时的想法

[链接]

3.4k 声望
79 粉丝
0 条评论
你知道吗?

[链接]

3.4k 声望
79 粉丝
文章目录
宣传栏