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

QLQ 發布于2019-08-20 10:50 / 3201人閱讀

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

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

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

這里有個基本原則：容器組件僅僅做數據提取，然后渲染對應的子組件，記住這個點，Trust me！

看下面這個展示列表的例子，不區分容器和展示組件的情況

// 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不可以復用

數據結構：組件應該對所需要的數據有所預期，但這里其實沒有，PropTypes可以很好的做到這一點

那么來看下分離的情況：

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

這樣就做到了數據提取和渲染分離，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狀態
除非他們需要的自己的狀態，生命周期，或性能優化才會被寫為功能組件

優勢：

展示和容器更好的分離，更好的理解應用程序和UI

重用性高，展示組件可以用于多個不同的state數據源

展示組件就是你的調色板，可以把他們放到多帶帶的頁面，在不影響應用程序的情況下，讓設計師調整UI

迫使你分離標簽，達到更高的可用性

容器云存儲計算分離-計算組件組件和組件通信 c 組件和服務器排序組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80349.html

前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
React組件拆分之道

摘要：劃分標準根據稿，不同的展示模塊分為不同的組件。比如頂部底部導航列表等容器組件業務組件與數據源后臺本地存儲進行數據傳輸操作不止是劃分標準根據業務功能劃分。最常見的是列表組件。為什么要拆分組件提高可讀性、可維護性如果不拆分代碼量大，所有內容集中在一起相同組件無法復用業務開發分工不明確，開發人員要關心非業務的代碼改代碼時，可能會影響其他業務，牽一發動全身(耦合) 任何一個操作...

terasum 2019-08-23 18:23 評論0 收藏0
React與Redux整合技術簡介

摘要：展示組件與容器組件的綁定庫的基本開發思想是展示組件與容器組件相分離。技術上講，容器組件就是使用從樹中讀取部分數據，并通過來把這些數據提供給要渲染的組件。說明：閱讀本篇文章需要對Redux有一定的了解，對Redux不了解的同學可先看看這篇文章Redux技術架構簡介（一） 1. React中引入react-redux 為了讓Redux和React更好的配合，Facebook專門開發了一個...

idealcn 2019-08-22 17:20 評論0 收藏0
頁面搭建工具總結及架構思考

摘要：在初步完成了在線流程圖編輯工具之后又接到了在線搭建頁面工具的需求剛開始其實并不想接項目因為從歷史以及現實原因來看個性化及動態渲染都是很難解決的痛點各種頁面搭建工具的不溫不火早已說明了這條路并沒有這么好走但從另一個方面來說既然有了這樣的需求那在初步完成了在線流程圖編輯工具之后,又接到了在線搭建頁面工具的需求,剛開始其實并不想接項目,因為從歷史以及現實原因來看,個性化及動態渲染都是很難解決的痛...

William_Sang 2019-04-23 11:57 評論0 收藏0
翻譯 | React AJAX最佳實踐

摘要：作者滬江前端開發工程師本文原創翻譯，有不當的地方歡迎指出。管理數據，而提供服務器上的數據，因此應用于處理網絡請求。結論使用建立的應用都是模塊化的會成為其中一個模塊，庫是另一個模塊。原文原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。作者：Oral （滬江Web前端開發工程師）本文原創翻譯，有不當的地方歡迎指出。轉載請指明出處。當你問起有關AJAX與React時，老司機們首先就會...

DirtyMind 2019-08-20 19:07 評論0 收藏0