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