React04-Context

Context 通過(guò)組件樹(shù)提供了一個(gè)傳遞數(shù)據(jù)的方法,從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞 props 屬性。
在一個(gè)典型的 React 應(yīng)用中贴汪,數(shù)據(jù)是通過(guò) props 屬性由上向下(由父及子)的進(jìn)行傳遞的,但這對(duì)于某些類(lèi)型的屬性而言是極其繁瑣的(例如:地區(qū)偏好,UI主題)瞧柔,這是應(yīng)用程序中許多組件都所需要的。 Context 提供了一種在組件之間共享此類(lèi)值的方式睦裳,而不必通過(guò)組件樹(shù)的每個(gè)層級(jí)顯式地傳遞 props 造锅。

Context 設(shè)計(jì)目的是為共享那些被認(rèn)為對(duì)于一個(gè)組件樹(shù)而言是“全局”的數(shù)據(jù)
是不是可以理解為:Context是一個(gè)局部的全局變量
來(lái)看一個(gè)例子

function F1(props) {
  return (
    <div className="border">
      1111,{props.n1}
      <F2 n2={props.n1} />
    </div>
  );
}
function F2(props) {
  return (
    <div className="border">
      2222,{props.n2}
      <F3 n3={props.n2} />
    </div>
  );
}

function F3(props) {
  return (
    <div className="border">
      3333,{props.n3}
      <F4 n4={props.n3} />
    </div>
  );
}

function F4(props) {
  return <div className="border">4444, {props.n4}</div>;
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      n: 99
    };
  }
  render() {
    return <F1 n1={this.state.n} />;
  }
}

如果想在F4里獲取到App里的n,必須要一層層的傳下去
再來(lái)看看如果使用Context該怎么做

function F1() {
  return (
    <div className="border">
      1111
      <F2/>
    </div>
  );
}
function F2() {
  return (
    <div className="border">
      2222
      <F3/>
    </div>
  );
}

function F3() {
  return (
    <div className="border">
      3333
      //必須用ThemeContext.Consumer包裹住想要獲取值的組件廉邑,然后用函數(shù)的方式傳值
       <ThemeContext.Consumer>
        {(n) => <F4 n4={n} />}
       </ThemeContext.Consumer>
    </div>
  );
}

function F4(props) {
  return (
    <div className="border">4444, {props.n4}</div>
  )
  
}
//聲明ThemeContext
const ThemeContext = React.createContext();

class App extends React.Component {

  render() {
    return (
      <div>
        //必須用ThemeContext.Provider包裹外層
        //在value里設(shè)置初始值
        <ThemeContext.Provider value='99'>
          return <F1 />
        </ThemeContext.Provider>
      </div>
    )
  }
}

來(lái)看看babel編譯以后的樣子就更容易理解了


來(lái)對(duì)這塊做個(gè)解析

<ThemeContext.Consumer>
    {(n) => <F4 n4={n} />}
</ThemeContext.Consumer>

我們?cè)囍鴣?lái)還原一下這個(gè)結(jié)構(gòu)

function F1(){
    console.log('我被調(diào)用了')
    return 'F1'
}
function Abc(props){
    //可以直接打印{F1}的值
    console.log(props.children)
    //也可以直接調(diào)用F1
    props.children()
    return (
        <div>
            {props.x}
            {props.children}   //通過(guò)這個(gè)可以拿到{F1}
        </div>
    )
}
function App(){
    return (
        <Abc x='Abc'>
          {F1}
        </Abc>
    )
}

Abc里調(diào)用F1時(shí)哥蔚,可以給F1傳值

function Abc(props){
    let x = 100
    //調(diào)用F1時(shí)給它傳值
    props.children(x)
    return (
        <div>
            {props.x}
            {props.children}   //通過(guò)這個(gè)可以拿到{F1}
        </div>
    )
}
function App(){
    return (
        <Abc x='Abc'>
          //直接使用箭頭函數(shù)
          {(n)=>console.log('我得到的信息是',n)}
        </Abc>
    )
}

現(xiàn)在就很清楚了,Abc就是ThemeContext.Consumer

function ThemeContext.Consumer(props){
    let x = 100
    //調(diào)用F1時(shí)給它傳值,并且可以得到F1的返回值
    let result = props.children(x)
    return (
        <div>
            {props.children}   //通過(guò)這個(gè)可以拿到{F1}
        </div>
    )
}
function App(){
    return (
        <ThemeContext.Consumer >
          //直接使用箭頭函數(shù),把F1里的內(nèi)容換成標(biāo)簽,
          {(n)=><div>{n}</div>}
        </ThemeContext.Consumer>
    )
}

這樣就解釋了ThemeContext.Consumer是什么東西----一個(gè)接受函數(shù)的組件

再回過(guò)頭來(lái)看

<ThemeContext.Provider value='99'>
    return <F1 />
</ThemeContext.Provider>

ThemeContext.Providervalue不光能傳普通的數(shù)字鬓催、字符串肺素,也可以傳函數(shù)、對(duì)象
來(lái)實(shí)現(xiàn)一個(gè)通過(guò)ThemeContext.Provider讓孫元素調(diào)用改變值的列子

function F1() {
  return (
    <div className="border">
      1111
      <F2/>
    </div>
  );
}
function F2() {
  return (
    <div className="border">
      2222
      <F3/>
    </div>
  );
}

function F3() {
  return (
    <div className="border">
      3333
       <ThemeContext.Consumer>
        {(x)=><F4 n4={x.n} setN={x.setN} />}
       </ThemeContext.Consumer>
    </div>
  );
}

function F4(props) {
  return (<div className='border'>
    <div className="border">4444, {props.n4}</div>
    <button onClick={props.setN}>Click me</button>
    </div>
  )
  
}

const ThemeContext = React.createContext();

class App extends React.Component {
  constructor(props){
    super()
    this.state = {
      x : {
        n : 99,
       setN : ()=>{
         this.setState({
           x : {
             ...this.state.x, //拓展運(yùn)算符宇驾,保留之前的this.state.x
             n : this.state.x.n + 1
           }
         })
       } 
      }
    }
  }
  render() {
    return (
      <div>
        <ThemeContext.Provider value={this.state.x}>
          return <F1 />
        </ThemeContext.Provider>
      </div>
    )
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末倍靡,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子课舍,更是在濱河造成了極大的恐慌塌西,老刑警劉巖他挎,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異捡需,居然都是意外死亡办桨,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)站辉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)呢撞,“玉大人,你說(shuō)我怎么就攤上這事饰剥∈庀迹” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵汰蓉,是天一觀的道長(zhǎng)绷蹲。 經(jīng)常有香客問(wèn)我,道長(zhǎng)顾孽,這世上最難降的妖魔是什么祝钢? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮若厚,結(jié)果婚禮上拦英,老公的妹妹穿的比我還像新娘。我一直安慰自己测秸,他們只是感情好龄章,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著乞封,像睡著了一般做裙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肃晚,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天锚贱,我揣著相機(jī)與錄音,去河邊找鬼关串。 笑死拧廊,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的晋修。 我是一名探鬼主播吧碾,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼墓卦!你這毒婦竟也來(lái)了倦春?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎睁本,沒(méi)想到半個(gè)月后尿庐,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡呢堰,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年抄瑟,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枉疼。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡皮假,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出骂维,到底是詐尸還是另有隱情钞翔,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布席舍,位于F島的核電站,受9級(jí)特大地震影響哮笆,放射性物質(zhì)發(fā)生泄漏来颤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一稠肘、第九天 我趴在偏房一處隱蔽的房頂上張望福铅。 院中可真熱鬧,春花似錦项阴、人聲如沸滑黔。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)略荡。三九已至,卻和暖如春歉胶,著一層夾襖步出監(jiān)牢的瞬間汛兜,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工通今, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留粥谬,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓辫塌,卻偏偏與公主長(zhǎng)得像漏策,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子臼氨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容