zoukankan      html  css  js  c++  java
  • (翻译) 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
    如果要转载,请至少著名上面的文章出处,谢谢。

  • 相关阅读:
    《20171101-构建之法:现代软件工程-阅读笔记》
    《软件工程课程总结》
    《20171122-构建之法:现代软件工程-阅读笔记》) (5分)
    阅读任务-阅读提问-4
    《20171115构建之法:现代软件工程-阅读笔记》)
    对软件工程的期望
    自我介绍
    Javaweb学习计划
    分布式事务解决方案
    countdown模式
  • 原文地址:https://www.cnblogs.com/williamjie/p/9473487.html
Copyright © 2011-2022 走看看