React容器组件和展示组件

 
展示组件
 
- 只关心它们的样子。
 
- 可能同时包含子级容器组件和展示组件,一般含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。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/wy1935/p/7092900.html