資訊專欄INFORMATION COLUMN
摘要：理論上，通過一層層傳遞下去當(dāng)然是沒問題的。不過這也太麻煩啦，要是能在最外層和最里層之間開一個穿越空間的蟲洞就好了。使用看起來很高大上的使用起來卻異常簡單。就像中的全局變量，只有真正全局的東西才適合放在中。
當(dāng)我們寫React時，我們總是通過改變State和傳遞Prop對view進(jìn)行控制，有時，也會遇到一點(diǎn)小麻煩。
背景但是隨著我們的應(yīng)用變的越來越復(fù)雜，組件嵌套也變的越來越深，有時甚至要從最外層將一個數(shù)據(jù)一直傳遞到最里層（比如當(dāng)前user的信息）。
理論上，通過prop一層層傳遞下去當(dāng)然是沒問題的。不過這也太麻煩啦，要是能在最外層和最里層之間開一個穿越空間的蟲洞就好了。
幸運(yùn)的是，React的開發(fā)者也意識到這個問題，為我們開發(fā)出了這個空間穿越通道 —— Context。
使用看起來很高大上的Context使用起來卻異常簡單。
基本使用假設(shè)我們有下面這樣的組件結(jié)構(gòu)。
D組件需要獲取在A組件中用戶信息應(yīng)該怎么辦？有了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方法中使用根據(jù)官方的文檔，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使用起來如此方便，是不是就應(yīng)該多多用它呢？
顯然，拋開Context還處于剛剛公開，API不穩(wěn)定不說，即使對于組件化的開發(fā)，到處用也不是一個好主意。
Context就像javascript中的全局變量，只有真正全局的東西才適合放在context中。
比如：
當(dāng)前用戶信息
flux、redux的store
session級別信息（語言，主題等）
所以，當(dāng)發(fā)現(xiàn)使用Context僅僅為了少打幾個字而不考慮存放何種數(shù)據(jù)，那很可能用錯Context了……
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78953.html
摘要：同時吸取了社區(qū)大量優(yōu)秀思想，進(jìn)行歸納比對。有興趣的讀者可以點(diǎn)擊下面的鏈接購買，再次感謝各位的支持與鼓勵懇請各位批評指正京東當(dāng)當(dāng)原文網(wǎng)址 在React中最小的邏輯單元是組件，組件之間如果有耦合關(guān)系就會進(jìn)行通信，本文將會介紹React中的組件通信的不同方式 通過歸納范，可以將任意組件間的通信歸類為四種類型的組件間通信，分別是父子組件，爺孫組件，兄弟組件和任意組件，需要注意的是前三個也可以算...
摘要：父子組件通訊通訊手段這是最常見的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過來使用。 父子組件通訊 通訊手段這是最常見的通信方式，父組件只需要將子組件需要的props傳給子組件，子組件直接通過this.props來使用。通訊內(nèi)容更多要提的是如何合理的設(shè)置子組件的props，要想將子組件設(shè)計成一個復(fù)用性強(qiáng)的通用組件，需要將能夠復(fù)用的部分抽象出來，抽象出來的props有兩...
摘要：學(xué)習(xí)筆記使用粒子系統(tǒng)模擬時空隧道本例的運(yùn)行結(jié)果如圖時空隧道演示地址的粒子系統(tǒng)的粒子系統(tǒng)主要是依靠精靈體來創(chuàng)建的，要實現(xiàn)中的粒子系統(tǒng)創(chuàng)建，一般有兩種方式。 WebGL three.js學(xué)習(xí)筆記 使用粒子系統(tǒng)模擬時空隧道 本例的運(yùn)行結(jié)果如圖：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...
閱讀 2405·2021-11-18 10:07
閱讀 2348·2021-09-22 15:59
閱讀 3116·2021-08-23 09:42
閱讀 2313·2019-08-30 15:44
閱讀 1225·2019-08-29 15:06
閱讀 2363·2019-08-29 13:27
閱讀 1252·2019-08-29 13:21
閱讀 1452·2019-08-29 13:13
