React中的Context應(yīng)用場(chǎng)景分析
Context定義和目的
Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過(guò)組件樹的逐層傳遞 props。
應(yīng)用場(chǎng)景 哪些數(shù)據(jù)會(huì)需要共享？
Context 設(shè)計(jì)目的是為了共享那些對(duì)于一個(gè)組件樹而言是**“全局”的數(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ì)從組件樹中離自身最近的那個(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ì)從組件樹中離自身最近的那個(gè)匹配的Provider中讀取到當(dāng)前的Context值。
3.2 純函數(shù)式組件中使用
在純函數(shù)式的組件中，可以使用Consumer來(lái)引用context的值。如果沒有上層對(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>
);
官方文檔
官方文檔請(qǐng)參考下邊的基礎(chǔ)和高級(jí)教程。
Hook API 索引 – React (reactjs.org)
以上就是React中的Context應(yīng)用場(chǎng)景分析的詳細(xì)內(nèi)容，更多關(guān)于React中的Context的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了如何基于react實(shí)現(xiàn)下拉刷新效果,在下拉的時(shí)候會(huì)進(jìn)入loading狀態(tài),文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
本文主要介紹了React表單容器的通用解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
react事件綁定時(shí)。this并不會(huì)指向當(dāng)前DOM元素。往往使用bind來(lái)改變this指向，今天通過(guò)本文給大家介紹React事件綁定的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了react如何添加less環(huán)境配置，本文給大家分享遇到問(wèn)題及解決方案，結(jié)合示例代碼圖文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05
React翻頁(yè)器的實(shí)現(xiàn)(包含前后端)
本文主要介紹了React翻頁(yè)器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了淺談React Event實(shí)現(xiàn)原理,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了React中classnames庫(kù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React hook 'useState' is calle
這篇文章主要為大家介紹了React hook 'useState' is called conditionally報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
react+ts實(shí)現(xiàn)簡(jiǎn)單jira項(xiàng)目的最佳實(shí)踐記錄
這篇文章主要介紹了react+ts實(shí)現(xiàn)簡(jiǎn)單jira項(xiàng)目，本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-07-07
React tabIndex使非表單元素支持focus和blur事件
這篇文章主要為大家介紹了React使用tabIndex使非表單元素支持focus和blur事件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11