React中的“蟲洞”——Context

muddyway 發布于2019-08-19 17:54 / 2931人閱讀

摘要：理論上，通過一層層傳遞下去當然是沒問題的。不過這也太麻煩啦，要是能在最外層和最里層之間開一個穿越空間的蟲洞就好了。使用看起來很高大上的使用起來卻異常簡單。就像中的全局變量，只有真正全局的東西才適合放在中。

當我們寫React時，我們總是通過改變State和傳遞Prop對view進行控制，有時，也會遇到一點小麻煩。

背景

但是隨著我們的應用變的越來越復雜，組件嵌套也變的越來越深，有時甚至要從最外層將一個數據一直傳遞到最里層（比如當前user的信息）。

理論上，通過prop一層層傳遞下去當然是沒問題的。不過這也太麻煩啦，要是能在最外層和最里層之間開一個穿越空間的蟲洞就好了。

幸運的是，React的開發者也意識到這個問題，為我們開發出了這個空間穿越通道 —— Context。

使用

看起來很高大上的Context使用起來卻異常簡單。

基本使用

假設我們有下面這樣的組件結構。

D組件需要獲取在A組件中用戶信息應該怎么辦？有了Context，我們可以這么做。

// Component A
class A extends React.Component {
// add the following method
  getChildContext() {
    return {
      user: this.props.user
    }
  }
  
  render() {
    return {this.props.children}
  }
}
// add the following property
A.childContextTypes = {
  user: React.PropTypes.object.isRequired
}


// Component D
class D extends React.Component {
  render() {
    return {this.context.user.name}
  }
}
// add the following property
D.contextTypes = {
  user: React.PropTypes.object.isRequired
}

很簡單吧，只要在外層定義一個getChildContext方法，在父層和里層分別制定contextTypes就可以直接在里層用this.context訪問了，是不是很厲害，XD

在lifecycle方法中使用

根據官方的文檔，Context在以下的lifecycle方法中也是可以使用的

void componentWillReceiveProps(
  object nextProps, object nextContext
)

boolean shouldComponentUpdate(
  object nextProps, object nextState, object nextContext
)

void componentWillUpdate(
  object nextProps, object nextState, object nextContext
)

void componentDidUpdate(
  object prevProps, object prevState, object prevContext
)

stateless組件中使用

同時，在最新的stateless組件中，也是可以使用Context的，而且更加簡單。

function D(props, context) {
  return (
    {this.context.user.name}
  );
}
D.contextTypes = {
  user: React.PropTypes.object.isRequired
}

使用場景

既然Context使用起來如此方便，是不是就應該多多用它呢？
顯然，拋開Context還處于剛剛公開，API不穩定不說，即使對于組件化的開發，到處用也不是一個好主意。
Context就像javascript中的全局變量，只有真正全局的東西才適合放在context中。

比如：

當前用戶信息

flux、redux的store

session級別信息（語言，主題等）

所以，當發現使用Context僅僅為了少打幾個字而不考慮存放何種數據，那很可能用錯Context了……

云服務器 GPU云服務器蟲洞 Context 獲取context stacking-context

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

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

解密傳統組件間通信與React組件間通信

摘要：同時吸取了社區大量優秀思想，進行歸納比對。有興趣的讀者可以點擊下面的鏈接購買，再次感謝各位的支持與鼓勵懇請各位批評指正京東當當原文網址在React中最小的邏輯單元是組件，組件之間如果有耦合關系就會進行通信，本文將會介紹React中的組件通信的不同方式通過歸納范，可以將任意組件間的通信歸類為四種類型的組件間通信，分別是父子組件，爺孫組件，兄弟組件和任意組件，需要注意的是前三個也可以算...

CoderBear 2019-08-23 12:01 評論0 收藏0
react開發教程（八）React組件通信

摘要：父子組件通訊通訊手段這是最常見的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過來使用。父子組件通訊通訊手段這是最常見的通信方式，父組件只需要將子組件需要的props傳給子組件，子組件直接通過this.props來使用。通訊內容更多要提的是如何合理的設置子組件的props，要想將子組件設計成一個復用性強的通用組件，需要將能夠復用的部分抽象出來，抽象出來的props有兩...

kamushin233 2019-08-21 11:51 評論0 收藏0
WebGL three.js學習筆記使用粒子系統模擬時空隧道（蟲洞）

摘要：學習筆記使用粒子系統模擬時空隧道本例的運行結果如圖時空隧道演示地址的粒子系統的粒子系統主要是依靠精靈體來創建的，要實現中的粒子系統創建，一般有兩種方式。 WebGL three.js學習筆記使用粒子系統模擬時空隧道本例的運行結果如圖：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

Guakin_Huang 2019-08-23 17:10 評論0 收藏0