(翻译) Container Components

CoyPan 发布于2019-08-22 11:02 / 1568人阅读

摘要：展示组建对数据结构有一定的要求，但是却没有办法限制数据类型。如果传入的结构发生了改变，那么组建就会掉，并不会抛出任何错误。再次声明这篇文章翻译自的一篇文章如果要转载，请至少著名上面的文章出处，谢谢。

这篇文章翻译自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  {this.state.comments.map(renderComment)} ;
  }
  renderComment({body, author}) {
    return {body}—{author};
  }
}

你的这个组建要同时负责获取数据和展示数据。当然，这种做法没有什么错的，但是你没有很好的利用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的prop。

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

所以，我们这么做获得了什么？

我们获取了很多东西…
我们分离了数据获取和数据渲染的逻辑。
我们让CommentList变成了可复用的组建。
我们允许CommentList可以通过PropTypes来限制props数据个格式。如果props格式出错，就会报错。

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

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

云服务器 GPU云服务器 Container Components styled-components web-components

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91660.html

(翻译)Presentational and Container Components

摘要：对于很多中间组件来说，他们并不需要这些，但是他们还必须传递给下一级组件。更倾向于，而更倾向于，当然这并不是绝对的。这是篇文章翻译自的这是篇文章翻译自medium的：Presentational and Container Components 译者语：这篇文章是紧接着对我上一篇翻译的扩充，对Container Component模式描述的更加细，解决了我很多开发中的困惑。 Prese...

mushang 2019-08-22 11:02 评论0 收藏0
关于React的Container&Presentational Component模型结构

摘要：同时减少了从数据源到叶子结点的层级，减少了中间层级的数量和不必要的重复渲染。模型这个名字是我自己编的，其实是对上面说的结构的一个分离。当然，像之前所说的地图，天气预报，按照逻辑他们也属于，但是他们也获取数据，处理数据。之前翻译了两篇关于Container&Presentational Component模型的文章，一篇是基础的Container和Component的定义，另外一篇是进...

Berwin 2019-08-21 11:20 评论0 收藏0
（翻译）Mantra官方文档

摘要：我们通过对我们应用程序的每个部分进行单元测试来实现这一点，同时遵循一个标准。它帮助你单元测试，动作和集成容器。当在组件库中使用库函数时，它应该是纯函数。 Mantra 工作草案-版本0.2.0 简介这是一个Mantra草案规范，一个由Kadira创建的Meteor的应用程序架构。它帮助开发人员构建可维护的，面向未来的Meteor应用程序。版权 The MIT License (M...

denson 2019-08-20 12:26 评论0 收藏0
2017-06-29 前端日报

摘要：前端日报精选如何在非项目中使用知乎专栏编码规范最常被遗忘的性能优化浏览器缓存个人文章译统一样式语言掘金新的开发者提及最多的个视频众成翻译中文第期在中使用译统一样式语言掘金前端现状答题救不了前端新人相学长怼前端岁以 2017-06-29 前端日报精选如何在非 React 项目中使用 Redux - 知乎专栏Javascript编码规范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

cnio 2019-08-21 17:47 评论0 收藏0