容器组件和展示组件

redux 的 React 绑定库包含了容器组件和展示组件相分离的开发思想。明智的做法是只在最顶层组件（如路由操作）里使用 Redux。其余内部组件仅仅是展示性的，所有数据都通过 props 传入。

不区分容器和展示组件的情况：

// 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>;
  }
}

可用性：CommentList不可以复用

那么来看下分离的情况：

// 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.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判断数据的可用性

二者的区别：
容器组件和展示组件分离的好处：

展示和容器更好的分离，更好的理解应用程序和UI
重用性高，展示组件可以用于多个不同的state数据源重用性高，展示组件可以用于多个不同的state数据源

容器组件和展示组件

相关推荐