Redux学习笔记------容器组件与展示组件分离

展示组件含义:

关心组件的展示的样子

可以包含一些展示组件和容器组件,有自己的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() 方法来生成。

原文地址:https://www.cnblogs.com/pengshuo/p/6645573.html