React 之容器組件和展示組件相分離解密

QLQ 發(fā)布于2019-08-20 10:50 / 3206人閱讀

摘要：的綁定庫包含了容器組件和展示組件相分離的開發(fā)思想。明智的做法是只在最頂層組件如路由操作里使用。其余內(nèi)部組件僅僅是展示性的，所有數(shù)據(jù)都通過傳入。

Redux 的 React 綁定庫包含了 容器組件和展示組件相分離 的開發(fā)思想。明智的做法是只在最頂層組件（如路由操作）里使用 Redux。其余內(nèi)部組件僅僅是展示性的，所有數(shù)據(jù)都通過 props 傳入。

那么為什么需要容器組件和展示組件相分離呢？

這里有個(gè)基本原則：容器組件僅僅做數(shù)據(jù)提取，然后渲染對應(yīng)的子組件，記住這個(gè)點(diǎn)，Trust me！

看下面這個(gè)展示列表的例子，不區(qū)分容器和展示組件的情況

// 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};
  }
}

可用性：CommentList不可以復(fù)用

數(shù)據(jù)結(jié)構(gòu)：組件應(yīng)該對所需要的數(shù)據(jù)有所預(yù)期，但這里其實(shí)沒有，PropTypes可以很好的做到這一點(diǎn)

那么來看下分離的情況：

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

這樣就做到了數(shù)據(jù)提取和渲染分離，CommentList可以復(fù)用，CommentList可以設(shè)置PropTypes判斷數(shù)據(jù)的可用性

來看下容器組件和展示組件的區(qū)別:

展示組件	容器組件
關(guān)注事物的展示	關(guān)注事物如何工作
可能包含展示和容器組件，并且一般會有DOM標(biāo)簽和css樣式	可能包含展示和容器組件，并且不會有DOM標(biāo)簽和css樣式
常常允許通過this.props.children傳遞	提供數(shù)據(jù)和行為給容器組件或者展示組件
對第三方?jīng)]有任何依賴，比如store 或者 flux action	調(diào)用flux action 并且提供他們的回調(diào)給展示組件
不要指定數(shù)據(jù)如何加載和變化	作為數(shù)據(jù)源，通常采用較高階的組件，而不是自己寫，比如React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
僅通過屬性獲取數(shù)據(jù)和回調(diào)
很少有自己的狀態(tài)，即使有，也是自己的UI狀態(tài)
除非他們需要的自己的狀態(tài)，生命周期，或性能優(yōu)化才會被寫為功能組件