react-redux绑定库是基于容器组件和展示组件分离的开发思想,是react开发中非常重要的一个思想。
详细介绍可以查看本文
#展示组件和容器组件对比
展示组件 | 容器组件 | |
---|---|---|
作用 | 描述如何展现(骨架、样式) | 描述如何运行(数据获取、状态更新) |
直接使用 Redux | 否 | 是 |
数据来源 | props | 监听 Redux state |
数据修改 | 从 props 调用回调函数 | 想 Redux 派发actions |
调用方式 | 手动 | 通常由 React Redux 生成 |
进行组件分离的好处
1.更好地分散注意力。通过这样写组件能更好地理解你的 app 和 UI。
2.更好地重用。你可以使用同样的表式组件配合完全不同的状态源,并在未来重用这些分离的容器组件。
3.展示组件对你 APP 的“调色”是很有必要的。你可以把它们放在单页里,并让设计师在不触碰逻辑的情况下自由地调整配色。
4.这强迫你抽出类似于:Sidebar,Page,ContextMenu,这样的布局组件并使用 this.props.children 而不是重复在几个容器组件中同样的标记和布局。
#什么时候该引入容器组件?
我建议你一开始只使用展示组件来构建你的APP。最终你将意识到你传递了太多 props 给中间的组件。当你意识到有些组件并没有用到它们接收的 props,而只是将这些 props向下传递。在底层的组件需要更多数据时,你不得不重写所有这些中间组件,这时候就很适合引入容器组件了。通过这种方式,你可以将 props 传递给叶子节点而不增加和它无关的中层组件的负担。
提示
不要把展示组件和容器组件的划分当做教条。有些时候甚至无关紧要。如果你不确定一个组件是该定义成展示组件还是容器组件,也许是区分得太早了,不用担心。