展示组件和容器组件

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 传递给叶子节点而不增加和它无关的中层组件的负担。

提示

不要把展示组件和容器组件的划分当做教条。有些时候甚至无关紧要。如果你不确定一个组件是该定义成展示组件还是容器组件，也许是区分得太早了，不用担心。