(翻譯) Container Components

CoyPan 發布于2019-08-22 11:02 / 1569人閱讀

摘要：展示組建對數據結構有一定的要求，但是卻沒有辦法限制數據類型。如果傳入的結構發生了改變，那么組建就會掉，并不會拋出任何錯誤。再次聲明這篇文章翻譯自的一篇文章如果要轉載，請至少著名上面的文章出處，謝謝。

這篇文章翻譯自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  {this.state.comments.map(renderComment)} ;
  }
  renderComment({body, author}) {
    return {body}—{author};
  }
}

你的這個組建要同時負責獲取數據和展示數據。當然，這種做法沒有什么錯的，但是你沒有很好的利用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的prop。

// 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來限制props數據個格式。如果props格式出錯，就會報錯。

我是container components模式的忠實簇擁者，它幫助我更好的完成React項目。大家不妨試一試，也可以觀看這個視屏。一個很棒的模式。

再次聲明：這篇文章翻譯自Medium的一篇文章：Container Components
如果要轉載，請至少著名上面的文章出處，謝謝。

云服務器 GPU云服務器 Container Components styled-components web-components

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

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

(翻譯)Presentational and Container Components

摘要：對于很多中間組件來說，他們并不需要這些，但是他們還必須傳遞給下一級組件。更傾向于，而更傾向于，當然這并不是絕對的。這是篇文章翻譯自的這是篇文章翻譯自medium的：Presentational and Container Components 譯者語：這篇文章是緊接著對我上一篇翻譯的擴充，對Container Component模式描述的更加細，解決了我很多開發中的困惑。 Prese...

mushang 2019-08-22 11:02 評論0 收藏0
關于React的Container&Presentational Component模型結構

摘要：同時減少了從數據源到葉子結點的層級，減少了中間層級的數量和不必要的重復渲染。模型這個名字是我自己編的，其實是對上面說的結構的一個分離。當然，像之前所說的地圖，天氣預報，按照邏輯他們也屬于，但是他們也獲取數據，處理數據。之前翻譯了兩篇關于Container&Presentational Component模型的文章，一篇是基礎的Container和Component的定義，另外一篇是進...

Berwin 2019-08-21 11:20 評論0 收藏0
（翻譯）Mantra官方文檔

摘要：我們通過對我們應用程序的每個部分進行單元測試來實現這一點，同時遵循一個標準。它幫助你單元測試，動作和集成容器。當在組件庫中使用庫函數時，它應該是純函數。 Mantra 工作草案-版本0.2.0 簡介這是一個Mantra草案規范，一個由Kadira創建的Meteor的應用程序架構。它幫助開發人員構建可維護的，面向未來的Meteor應用程序。版權 The MIT License (M...

denson 2019-08-20 12:26 評論0 收藏0
2017-06-29 前端日報

摘要：前端日報精選如何在非項目中使用知乎專欄編碼規范最常被遺忘的性能優化瀏覽器緩存個人文章譯統一樣式語言掘金新的開發者提及最多的個視頻眾成翻譯中文第期在中使用譯統一樣式語言掘金前端現狀答題救不了前端新人相學長懟前端歲以 2017-06-29 前端日報精選如何在非 React 項目中使用 Redux - 知乎專欄Javascript編碼規范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 評論0 收藏0
React項目實戰：環境搭建

摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。前言前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議：如果對Weex App感興趣，應該選擇vue框架；如果...

cnio 2019-08-21 17:47 評論0 收藏0