(翻译) Container Components

这篇文章翻译自Medium的一篇文章：Container Components

选择这篇文章翻译的缘由是，在刚接触React的时候，这篇文章很好的指引我了解Container Components模式。

Container Component模式

Container components模式是一款很棒的React模式，对个人代码影响很大。

Jason Bonta在React.js大会中说过他们如何在Facebook开发高效的组建。在这个演讲中，他提到了container components模式。

其实原理很简单：

一个container负责数据的获取，而后渲染它对应的下级component。就这些而已。

“对应的”的意思是他们拥有共同的名称：

StockWidgetContainer => StockWidget
TagCloudContainer => TagCloud
PartyPooperListContainer => PartyPooperList

大概就是这个意思。

为何要用Containers呢？

假设咱们须要作一个展现评论的组建。在你不知道container components模式以前，你会把全部的东西都放在一个里面：

// CommentList.js
class CommentList 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 <ul> {this.state.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

你的这个组建要同时负责获取数据和展现数据。固然，这种作法没有什么错的，可是你没有很好的利用React的一些优点。

复用性

除非在一个如出一辙的使用环境下，你没法重用CommentList组建。

数据结构

你的展现组建对须要的数据架构有具体的要求，而PropTypes可以很好地知足这个要求。
展现组建对数据结构有必定的要求，可是却没有办法限制数据类型。若是传入的json结构发生了改变，那么组建就会down掉，并不会抛出任何错误。

若是咱们使用container

// CommentListContainer.js
class 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 <CommentList comments={this.state.comments} />;
  }
}

同时，咱们修改一下CommentList让它能够接受一个comments的prop。

// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() { 
    return <ul> {this.props.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

因此，咱们这么作得到了什么？

咱们获取了不少东西…
咱们分离了数据获取和数据渲染的逻辑。
咱们让CommentList变成了可复用的组建。
咱们容许CommentList能够经过PropTypes来限制props数据个格式。若是props格式出错，就会报错。

我是container components模式的忠实簇拥者，它帮助我更好的完成React项目。你们不妨试一试，也能够观看这个视屏。一个很棒的模式。

---

再次声明：这篇文章翻译自Medium的一篇文章：Container Components若是要转载，请至少著名上面的文章出处，谢谢。