Redux的React绑定库包含了容器组件和展示组件分离的开发思路。只在最顶层的组件（例如路由操作）中使用Redux是明智的。其余内部组件仅用于展示，所有数据均通过props传入。那么为什么需要将容器组件与展示组件分开呢？这里有一个基本原则：容器组件只做数据提取，然后渲染相应的子组件，记住这一点，相信我！看下面显示列表的例子，不区分容器和显示组件//CommentList.jsclassCommentListextendsReact.Component{constructor(){super();this.state={comments:[]}}componentDidMount(){$.ajax({url:"/my-comments.json",dataType:'json',success:function(comments){this.setState({comments:评论});}.bind(this)});}render(){return
{this.state.comments.map(renderComment)}
;}renderComment({body,author}){return
{body}—{author};}}可用性：CommentList不能重用数据结构：组件应该对需要的数据有期望，但是这里没有。PropTypes可以很好地做到这一点。再看看分离的情况：//CommentListContainer.jsclassCommentListContainerextendsReact.Component{constructor(){super();this.state={comments:[]}}componentDidMount(){$.ajax({url:"/my-comments.json",dataType:'json',success:function(comments){this.setState({c评论：评论});}.bind(这个)});}render(){return
;}}//CommentList.jsclassCommentListextendsReact.Component{constructor(props){super(props);}render(){return
{this.props.comments.map(renderComment)}
;}renderComment({body,author}){return
{body}—{author};}}这样，数据的提取和渲染就分开了。CommentList可以重复使用。CommentList可以设置PropTypes来判断数据的可用性。再来看看容器组件和显示组件的区别：显示组件containercomponent关注事物的表现关注事物的工作原理可能包括表现组件和容器组件，一般有DOM标签和css样式可能包括表现组件和容器组件，以及不会有DOM标签和css样式经常允许通过this.props.children提供数据和行为给容器组件或显示组件，不依赖第三方，例如store或flux动作调用flux动作并提供它们的回调以显示组件作为数据源不指定数据如何加载和变化，通常使用更高层的组件，而不是自己写，比如ReactRedux的connect()，Relay的createContainer()，FluxUtils的Container.create()只能通过属性获取数据，回调很少有自己的状态，即使有，也是自己的UI状态，除非需要自己的状态、生命周期、性能优化，才会写成功能组件。优点：presentation和container更好的分离，更好的理解application和UI的高复用性，presentation组件可以在多个不同状态的数据源显示组件是你的调色板，你可以把它们放在一个单独的页面上，让设计者调整不影响应用的UI，逼着你分标签外以获得更高的可用性
