React容器组件和展示组件

Presentational and Container Components

 

展示组件

 

- 只关心它们的样子。

 

- 可能同时包含子级容器组件和展示组件，一般含DOM标签和自定的样式。

 

- 通常用this.props.children来包含其他组件

 

- 不依赖app其它组件，比如flux的actions和stores

 

- 不会定义数据如何读取，如何改变

 

- 只通过this.props接受数据和回调函数

 

- 很少有自己的状态变量，即使有，也是UI的状态变量，比如toggleMenuOpen,InputFocus

 

- 一般是函数级组件，除非它们需要状态，lifecycle hooks，优化处理。

 

容器组件

 

- 只关心它们的运作方式。

 

- 可能同时包含子级容器组件和展示组件，但大都不含DOM标签，而含他们自己所用的wrapping div，从不用自己的样式。

 

- 为展示组件或其他组件提供数据和方法。

 

- 调用Flux的actions，并且将其作为展示组件的回调函数。

 

- 维持许多状态变量，通常充当一个数据源。

 

- 通常由高阶组件生成，比如Redux里的connect()，Relay里的createContainer()，Flux Utils里的Container.create()，而非手工写出（译者：可能在meteor中数据是例外吧）

 

- 例子有UserPage, FollowersSidebar, StoryContainer, FollowedUserList。