展示组件含义:
关心组件的展示的样子
可以包含一些展示组件和容器组件,有自己的DOM标记和样式
通常可以通过this.props.children进行控制。
对应用程序的其余部分没有依赖关系,例如Flux操作或store。
不指定数据的加载和变化
通过props接收数据和回调
很少有它们自己的state,有也是UI状态而不是数据
被编写为功能组件,除非它们需要状态,生命周期或性能优化。
容器组件的含义:
关心组件的工作方式
可以包含一些展示组件和容器组件,没有有自己的DOM标记除了包含性的div和没有自己的样式
提供数据和行为给展示组件或者其他的容器组件
调用action,并作为回调给展示组件
通常是有状态的,往往作为数据源
通常使用更高阶的组件,如来自React Redux的connect(),来自Relay的createContainer()或来自Flux Utils的Container.create()生成的,而不是用手编写。
展示组件 | 容器组件 | |
---|---|---|
作用 | 描述如何展现(骨架、样式) | 描述如何运行(数据获取、状态更新) |
直接使用 Redux | 否 | 是 |
数据来源 | props | 监听 Redux state |
数据修改 | 从 props 调用回调函数 | 向 Redux 派发 actions |
调用方式 | 手动 | 通常由 React Redux 生成 |
可以直接使用 store.subscribe()
来编写容器组件。但不建议这么做因为就无法使用 React Redux 带来的性能优化。也因此,不要手写容器组件,都是使用 React Redux 的 connect()
方法来生成。