您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)Context怎么在React中應(yīng)用,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
Context 提供了一種在組件之間共享數(shù)據(jù)的方式,而不必顯式地通過(guò)組件樹(shù)的逐層傳遞 props。
應(yīng)用場(chǎng)景 哪些數(shù)據(jù)會(huì)需要共享?
Context 設(shè)計(jì)目的是為了共享那些對(duì)于一個(gè)組件樹(shù)而言是**“全局”的數(shù)據(jù)**,例如當(dāng)前認(rèn)證的用戶、主題或首選語(yǔ)言。
1. 創(chuàng)建并初始化Context
const MyContext = createContex(defaultValue);
創(chuàng)建一個(gè) Context 對(duì)象。當(dāng) React 渲染一個(gè)訂閱了這個(gè) Context 對(duì)象的組件,這個(gè)組件會(huì)從組件樹(shù)中離自身最近的那個(gè)匹配的 Provider
中讀取到當(dāng)前的 context 值。
2. 訂閱Context
<MyContext.Provider value={/* 某個(gè)值 */}>
Provider 接收一個(gè) value
屬性,傳遞給消費(fèi)組件。一個(gè) Provider 可以和多個(gè)消費(fèi)組件有對(duì)應(yīng)關(guān)系。多個(gè) Provider 也可以嵌套使用,里層的會(huì)覆蓋外層的數(shù)據(jù)。
這里有兩個(gè)相關(guān)的概念
Provider - Context提供者,或Context的訂閱者。可以理解為通過(guò)Provider為其內(nèi)部組件訂閱了Context值的變動(dòng),一旦Context值有變化,就會(huì)觸發(fā)內(nèi)部組件重新渲染。
Comsumer - Context消費(fèi)者(消費(fèi)組件),或者叫Context使用者。即在Provider內(nèi)部使用useContext()
來(lái)使用或消費(fèi)Context的組件。這些組件通過(guò)useContext()獲取、使用Context的最新值。
3. 使用Conext
3.1 React組件中使用
const value = useContext(MyContext);
在消費(fèi)組件中引用Context。value會(huì)從組件樹(shù)中離自身最近的那個(gè)匹配的Provider中讀取到當(dāng)前的Context值。
3.2 純函數(shù)式組件中使用
在純函數(shù)式的組件中,可以使用Consumer
來(lái)引用context的值。如果沒(méi)有上層對(duì)應(yīng)的Provider,value等同于傳遞給createContext()
的defaultValue
.
<MyContext.Consumer> {value => /* 基于 context 值進(jìn)行渲染*/} </MyContext.Consumer>
4. Context的更新
4.1 自上而下更新Context
自上而下更新指的是更新Provider的value值。當(dāng) Provider 的 value
值發(fā)生變化時(shí),它內(nèi)部的所有消費(fèi)組件內(nèi)通過(guò)useContext
獲取到的值會(huì)自動(dòng)更新,并觸發(fā)重新渲染。
//App.js // .... export default function App() { //... // const {contextValue, setContextValue} = React.useState(initialValue); // function to update the context value function updateContext(newValue) { // ... // 更新contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11都會(huì)觸發(fā)重新渲染。 setContextValue(newValue) } ... return ( <App> <MyContext.Provider value={contextValue}> <ConsumerComponent1> <ConsumerComponent11> // .... </ComsumerComponent11> </ConsumerComponent1> <ConsumerComponent2 /> <ConsumerComponent3 /> </MyContext.Provider> </App> ); }
4.2 自下而上(從消費(fèi)組件)更新Context
在某些情況下,需要在某個(gè)消費(fèi)組件內(nèi)更新context
,并且適配到整個(gè)程序。比如通過(guò)應(yīng)用程序的setting
組件修改UI風(fēng)格。 這時(shí)就需要通過(guò)回調(diào)將更新一層層傳遞到對(duì)應(yīng)的Provider,更新Provide對(duì)應(yīng)的value
,從而觸發(fā)所有相關(guān)消費(fèi)組件的更新。
// app.js export default function App() { ... const {contextValue, setContextValue} = React.useState(initialValue); // function to update the context value function updateContext(newValue) { // ... // 更新contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11都會(huì)觸發(fā)重新渲染。 setContextValue(newValue) } ... return ( <App> <MyContext.Provider value={contextValue}> <ConsumerComponent1> <ConsumerComponent11 updateValue={updateContext}> // 通過(guò)回調(diào)形式的props, 在ConsumerComponent11中更新contextValue, 因?yàn)閏ontextValue屬于最頂層的Provider的值,所以也會(huì)觸發(fā)ConsumerComponent1, ConsumerComponent2, ConsumerComponent3重新渲染。 </ComsumerComponent11> </ConsumerComponent1> <ConsumerComponent2 /> <ConsumerComponent3 /> </MyContext.Provider> </App> ); }
4.3 Provider嵌套
在一些情況下,可能會(huì)出現(xiàn)同一個(gè)Context的provider嵌套的情況,這時(shí)候可以理解為兩個(gè)Context。不同的是,
... const {contextValue, setContextValue} = React.useState(initialValue); // function to update the context value function updateContext(newValue) { // ... // 更新contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11都會(huì)觸發(fā)重新渲染。 setContextValue(newValue) } ... return ( <App> <MyContext.Provider value={contextValue}> <ConsumerComponent1> <ConsumerComponent11 /> </ConsumerComponent1> <ConsumerComponent2> ... // 如果只希望更新ComsumerComponent21, ComsumerComponent22中的值 const localContextValue = useContext(MyContext); // 從上一層Provider中獲取當(dāng)前值 const {tempContextValue, setTempContextValue} = React.useState(localContextValue); function updateTempContext(newValue) { // 這里更新以后只會(huì)觸發(fā)ConsumerComponent21和ConsumerComponent22的重新渲染 setTempContextValue(newValue); } // 這里新建Provider,在ConsumerComponent21和ConsumerComponent22之間共享數(shù)據(jù)。 <MyContext.Provider value={tempValue}> <ConsumerComponent21> // 在ConsumerComponent21中通過(guò)useContext(MyContext)訂閱 // 獲取到的值為離自身最近的那個(gè)匹配的Provider中讀取到的Context值,即tempValue </ConsumerComponent21> <ConsumerComponent22> </ConsumerComponent22> </MyContext.Provider value={contextValue}> </ConsumerComponent2> <ConsumerComponent3 /> </MyContext.Provider> </App> );
以上就是Context怎么在React中應(yīng)用,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。