原文：

Container Components

在 React 模式上对我的代码有最深远影响的一个模式叫 container component 模式。

在 React.js Conf 上，Jason Bonta 和我们讲了他们在Facebook上是如何建立高性能组件（High Performance Components）。Nestled 在这个演讲中讲的就是。

这个概念很简单：

一个 container 只是做数据拉取然后渲染与它的 corresponding 子组件。就是这样。

“Corresponding” 意味着分享同一个名称的组件，例如：

StockWidgetContainer => StockWidgetTagCloudContainer => TagCloudPartyPooperListContainer => PartyPooperList

这就是其中的概念。

Why containers?

比如你有一个用于展示评论的组件。你并不知道有关 container 组件。所以，你会将所有东西都放在一个地方。

//  CommentList.jsclass CommentList extends React.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(renderComponent)} 
    
;    }    renderComponent({body, author}){        return 
 {body}-{author} 
;    }}

你的组件就是用于拉取数据并展示它。这并没有什么"错误"，但是你却错过了一些React的优点。

可复用性

CommentList组件除了在同一精确的条件情况下才能复用。

数据结构

你希望的组件应该规定他们需要的数据类型的预期。PropTypes正是干这个的。

我们的组件对数据结构要求很高但是没有办法说出这些要求。如果json的接口数据改变了，这个组件会不做出任何提示出错。（其实想说的就是，无法好好利用PropTypes来把控数据结构是否正确）

再来一次。这一次加上container

首先，让我们将数据拉取的功能移到 container 组件上。

// CommentListContainer.jsclass CommentListContainer extends React.Component{    constructor(){        super();        this.state = { comments: [] }    }    componentDidMount() {    $.ajax({      url: "/my-comments.json",      dataType: 'json',      success: function(comments) {        this.setState({comments: comments});      }.bind(this)    });  }  render() {    return 
    ;  }}

现在，我们将comments作为CommentList的prop重制一遍。

// CommentList.jsclass CommentList extends React.Component {    constructor(props) {        super(props);    }    render() {        return 
    
      {this.props.comments.map(renderComment)} 
    
;    }    renderComment({body, author}) {        return 
{body}—{author}
;    }}

最后，我们得到了什么？

我们实际上得到了很多...

我们分开了我们的数据拉取和渲染的关注点。

我们使我们的CommentList组件可以复用了。

我们可以让CommentList有能力使用PropTypes并且一旦出错便会提示。

我是一个 container components 的大粉丝。他们让我的 React game 进步了很多，并且使我的组件更容易去阅读。尝试一下他们，并看一下。太棒了！

Carry on, nerds.