React 之容器组件和展示组件相分离解密-白红宇

React 之容器组件和展示组件相分离解密

阅读量：6850 次

发布时间：2019-06-26

本文共 1955 字，大约阅读时间需要 6 分钟。

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

那么为什么需要容器组件和展示组件相分离呢？

这里有个基本原则：容器组件仅仅做数据提取，然后渲染对应的子组件，记住这个点，Trust me！

看下面这个展示列表的例子，不区分容器和展示组件的情况

// CommentList.jsclass 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}
;  }}

可用性：CommentList不可以复用

数据结构：组件应该对所需要的数据有所预期，但这里其实没有，PropTypes可以很好的做到这一点

那么来看下分离的情况：

// CommentListContainer.jsclass 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.jsclass CommentList extends React.Component {  constructor(props) {    super(props);  }  render() {     return 
    
      {this.props.comments.map(renderComment)} 
    
;  }  renderComment({body, author}) {    return {body}—{author}
;  }}

这样就做到了数据提取和渲染分离，CommentList可以复用，CommentList可以设置PropTypes判断数据的可用性

来看下容器组件和展示组件的区别:

展示组件	容器组件
关注事物的展示	关注事物如何工作
可能包含展示和容器组件，并且一般会有DOM标签和css样式	可能包含展示和容器组件，并且不会有DOM标签和css样式
常常允许通过this.props.children传递	提供数据和行为给容器组件或者展示组件
对第三方没有任何依赖，比如store 或者 flux action	调用flux action 并且提供他们的回调给展示组件
不要指定数据如何加载和变化	作为数据源，通常采用较高阶的组件，而不是自己写，比如React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
仅通过属性获取数据和回调
很少有自己的状态，即使有，也是自己的UI状态
除非他们需要的自己的状态，生命周期，或性能优化才会被写为功能组件