这篇文章翻译自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
如果要转载,请至少著名上面的文章出处,谢谢。

(翻译) Container Components的更多相关文章

  1. (翻译)React Container Components

    原文:Container Components Container Components 在 React 模式上对我的代码有最深远影响的一个模式叫 container component 模式. 在 ...

  2. [Redux] Extracting Container Components (FilterLink)

    Learn how to avoid the boilerplate of passing the props down the intermediate components by introduc ...

  3. Presentational and Container Components

    https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 There’s a simple pattern I fi ...

  4. [Redux] Extracting Container Components -- Complete

    Clean TodoApp Component, it doesn't need to receive any props from the top level component: const To ...

  5. [Redux] Extracting Container Components -- VisibleTodoList

    Code to be refacted: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo =& ...

  6. [Redux] Redux: Extracting Container Components -- AddTodo

    Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> < ...

  7. 关于React的Container&Presentational Component模型结构分析

    react.js javascript 3 之前翻译了两篇关于Container&Presentational Component模型的文章,一篇是基础的Container和Component ...

  8. [Angular 2] Passing Observables into Components with Async Pipe

    The components inside of your container components can easily accept Observables. You simply define ...

  9. C#委托,事件理解入门 (译稿)

    原文地址:http://www.codeproject.com/Articles/4773/Events-and-Delegates-Simplified 引用翻译地址:http://www.cnbl ...

随机推荐

  1. AVRStudio 6 添加调试功能

    下载这个文件并安装就可以了:http://avr-jungo-usb.software.informer.com/download/ 具体可以看这个贴子:http://electronics.stac ...

  2. zoj 3471 Most Powerful (有向图)最大生成树 状压dp

    题目链接 题意 \(N\)种气体,\(i\)气体与\(j\)气体碰撞会: 产生\(a[i][j]\)的威力: 导致\(j\)气体消失. 求产生威力之和的最大值. 思路 和前几题找图上路径的题不一样,该 ...

  3. boost::thread编程-线程中断(转)

    原文转自 http://blog.csdn.net/anda0109/article/details/41943691 thread的成员函数interrupt()允许正在执行的线程被中断,被中断的线 ...

  4. CSU 1505: 酷酷的单词【字符串】

    Description 输入一些仅由小写字母组成的单词.你的任务是统计有多少个单词是“酷”的,即每种字母出现的次数都不同.比如ada是酷的,因为a出现2次,d出现1次,而1和2不同.再比如,banan ...

  5. weblogic优化参数

    因部署应用多,内存是使用量较大以及系统需要放在后台运行,以下步骤在确认weblogic可以正常运行的情况下继续进行修改配置. 一.启动免输密码配置: 1.停止weblogic 在系统运行界面按ctrl ...

  6. Linux系统日常运维-修改IP地址

    分享下高手写的很好的文章 IP地址.子网掩码.网络号.主机号.网络地址.主机地址 step 0: check the iptables.selinux service iptables iptable ...

  7. 10.1综合强化刷题 Day4

    财富(treasure) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有n个小伙伴.每个小伙伴有一个身高hi. 这个游戏是这样的,LYK生活的环境是以 ...

  8. 平衡树之非旋Treap

    平衡树(二叉树) 线段树不支持插入or删除一个数于是平衡树产生了 常见平衡树:treap(比sbt慢,好写吧),SBT(快,比较好写,有些功能不支持),splay(特别慢,复杂度当做根号n来用,功能强 ...

  9. glsl镜面水倒影的实现[转]

    http://blog.sina.com.cn/s/blog_78ea87380101ejbf.html 使用两相机,一个master相机, 主要负责场景的渲染, 另一个rtt相机, 和master相 ...

  10. maven仓库中有jar包pom还报错

    maven仓库中有jar包pom还报错 就报错,咋啦? 这个包来源不明,自己拷贝进来的吧?你当我mvn是傻子?我要去网上验证一下: 我自己有个_remote.respositories文件,如果自己用 ...