概覽
定義: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 比較新舊值來確定變化。