組件通信 context

概覽

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

參考文獻(xiàn)

react context

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容