在Redux框架下,一个React组件基本上就是要完成如下功能:
- 和Store打交道,读取Store的状态,用于初始化组件的状态,同时还需要监听Store的状态的改变;当Store状态发生变化时,需要更新组件的状态,从而驱动组件重新渲染;当需要更新Store状态时,就要派发action对象。
- 根据当前props与state渲染界面
容器组件
负责和Redux Store打交道的组件,处于外层。
涉及到状态的更新与转换。
展示组件
只负责渲染界面的组件,处于中间层或内层。
就是一个纯函数,根据props产生结果,而不需要state。
关系
容器组件与展示组件的拆分,是设计React组件的一种模式,和Redux没有直接关系。
区别
容器组件 | 展示组件 | |
---|---|---|
位置 | 最顶层,路由处理 | 中间和子组件 |
使用Redux | 是 | 否 |
读取数据 | 从Redux获取 state | 从props获取数据 |
修改数据 | 向Redux发起 actions | 从props调用回调函数 |
完整示例: