(翻译) Container Components
这篇文章翻译自Medium的一篇文章:Container Components 选择这篇文章翻译的原因是,在刚接触React的时候,这篇文章很好的指引我了解Container Components模式。 Container Component模式Container components模式是一款很棒的React模式,对我的代码影响很大。 Jason Bonta在React.js大会中说过他们如何在Facebook开发高效的组建。在这个演讲中,他提到了container components模式。 其实原理很简单:
“对应的”的意思是他们拥有共同的名称: 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能够很好地满足这个要求。 如果我们使用container// CommentListContainer.js class CommentListContainer extends React.Component { constructor() { super(); this.state = { comments: [] } } componentDidMount() { $.ajax({ url: "/my-comments.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>; } } 所以,我们这么做获得了什么?我们获取了很多东西… 我是container components模式的忠实簇拥者,它帮助我更好的完成React项目。大家不妨试一试,也可以观看这个视屏。一个很棒的模式。 再次声明:这篇文章翻译自Medium的一篇文章:Container Components如果要转载,请至少著名上面的文章出处,谢谢。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |