(翻譯) Container Components

CoyPan 發(fā)布于2019-08-22 11:02 / 1580人閱讀

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

這篇文章翻譯自Medium的一篇文章：Container Components

選擇這篇文章翻譯的原因是，在剛接觸React的時候，這篇文章很好的指引我了解Container Components模式。

Container Component模式

Container components模式是一款很棒的React模式，對我的代碼影響很大。

Jason Bonta在React.js大會中說過他們?nèi)绾卧贔acebook開發(fā)高效的組建。在這個演講中，他提到了container components模式。

其實原理很簡單：

一個container負責數(shù)據(jù)的獲取，然后渲染它對應的下級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};
  }
}

你的這個組建要同時負責獲取數(shù)據(jù)和展示數(shù)據(jù)。當然，這種做法沒有什么錯的，但是你沒有很好的利用React的一些優(yōu)勢。

復用性

除非在一個一模一樣的使用環(huán)境下，你無法重用CommentList組建。

數(shù)據(jù)結(jié)構(gòu)

你的展示組建對需要的數(shù)據(jù)架構(gòu)有具體的要求，而PropTypes能夠很好地滿足這個要求。
展示組建對數(shù)據(jù)結(jié)構(gòu)有一定的要求，但是卻沒有辦法限制數(shù)據(jù)類型。如果傳入的json結(jié)構(gòu)發(fā)生了改變，那么組建就會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};
  }
}

所以，我們這么做獲得了什么？

我們獲取了很多東西…
我們分離了數(shù)據(jù)獲取和數(shù)據(jù)渲染的邏輯。
我們讓CommentList變成了可復用的組建。
我們允許CommentList可以通過PropTypes來限制props數(shù)據(jù)個格式。如果props格式出錯，就會報錯。

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91660.html

(翻譯)Presentational and Container Components

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

mushang 2019-08-22 11:02 評論0 收藏0
關于React的Container&Presentational Component模型結(jié)構(gòu)

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

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

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

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

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

gaosboy 2019-08-20 17:37 評論0 收藏0
React項目實戰(zhàn)：環(huán)境搭建

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

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