展示组件
- 只关心它们的样子。
- 可能同时包含子级容器组件和展示组件,一般含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。