概覽
定義:Context 通過組件樹提供了一個(gè)傳遞數(shù)據(jù)的方法硝岗,從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞 props 屬性。
內(nèi)容
1 設(shè)計(jì)目的
共享那些被認(rèn)為對(duì)于一個(gè)組件樹而言是“全局”的數(shù)據(jù)咽块。
誤解:不要僅僅為了避免在幾個(gè)層級(jí)下的組件傳遞 props 而使用 context,它是被用于在多個(gè)層級(jí)的多個(gè)組件需要訪問相同數(shù)據(jù)的情景命咐。
2 API
React.createContext
創(chuàng)建一對(duì) { Provider, Consumer }壹堰。當(dāng) React 渲染 context 組件 Consumer 時(shí),它將從組件樹的上層中爬骤,最接近且匹配的 Provider 讀取當(dāng)前的 context 值充石。
如果上層的組件樹沒有一個(gè)匹配的 Provider,而此時(shí)你需要渲染一個(gè) Consumer 組件霞玄,那么你可以用到 defaultValue 骤铃。
Provider
接收一個(gè)value 屬性傳遞給 Provider 的后代Consumers。一個(gè) Provider 可以聯(lián)系到多個(gè) Consumers坷剧。Providers 可以被嵌套以覆蓋組件樹內(nèi)更深層次的值惰爬。
Consumer
接收一個(gè)函數(shù)作為子節(jié)點(diǎn)。 函數(shù)接收當(dāng)前 context 的值并返回一個(gè) React 節(jié)點(diǎn)惫企。傳遞給函數(shù)的 value
將等于組件樹中上層 context 的最近的 Provider 的 value
屬性撕瞧。如果 context 沒有 Provider ,那么 value
參數(shù)將等于被傳遞給 createContext()
的 defaultValue
狞尔。
每當(dāng) Provider 的值發(fā)生改變時(shí)丛版,所有的 Consumers 都將會(huì)重新渲染。通過使用相同的算法如Object.is
比較新舊值來確定變化偏序。