React中的Context應用場景分析
Context定義和目的
Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過組件樹的逐層傳遞 props。
應用場景 哪些數(shù)據(jù)會需要共享？
Context 設計目的是為了共享那些對于一個組件樹而言是**“全局”的數(shù)據(jù)**，例如當前認證的用戶、主題或首選語言。
使用步驟
1. 創(chuàng)建并初始化Context
const MyContext = createContex(defaultValue);
創(chuàng)建一個 Context 對象。當 React 渲染一個訂閱了這個 Context 對象的組件，這個組件會從組件樹中離自身最近的那個匹配的 Provider 中讀取到當前的 context 值。
2. 訂閱Context
<MyContext.Provider value={/* 某個值 */}>
Provider 接收一個 value 屬性，傳遞給消費組件。一個 Provider 可以和多個消費組件有對應關系。多個 Provider 也可以嵌套使用，里層的會覆蓋外層的數(shù)據(jù)。
這里有兩個相關的概念
- Provider - Context提供者，或Context的訂閱者?？梢岳斫鉃橥ㄟ^Provider為其內部組件訂閱了Context值的變動，一旦Context值有變化，就會觸發(fā)內部組件重新渲染。
- Comsumer - Context消費者（消費組件），或者叫Context使用者。即在Provider內部使用
useContext()來使用或消費Context的組件。這些組件通過useContext()獲取、使用Context的最新值。
3. 使用Conext
3.1 React組件中使用
const value = useContext(MyContext);
在消費組件中引用Context。value會從組件樹中離自身最近的那個匹配的Provider中讀取到當前的Context值。
3.2 純函數(shù)式組件中使用
在純函數(shù)式的組件中，可以使用Consumer來引用context的值。如果沒有上層對應的Provider，value等同于傳遞給createContext()的defaultValue.
<MyContext.Consumer>
{value => /* 基于 context 值進行渲染*/}
</MyContext.Consumer>
4. Context的更新
4.1 自上而下更新Context
自上而下更新指的是更新Provider的value值。當 Provider 的 value 值發(fā)生變化時，它內部的所有消費組件內通過useContext獲取到的值會自動更新，并觸發(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都會觸發(fā)重新渲染。
setContextValue(newValue)
}
...
return (
<App>
<MyContext.Provider value={contextValue}>
<ConsumerComponent1>
<ConsumerComponent11>
// ....
</ComsumerComponent11>
</ConsumerComponent1>
<ConsumerComponent2 />
<ConsumerComponent3 />
</MyContext.Provider>
</App>
);
}
4.2 自下而上（從消費組件）更新Context
在某些情況下，需要在某個消費組件內更新context，并且適配到整個程序。比如通過應用程序的setting組件修改UI風格。 這時就需要通過回調將更新一層層傳遞到對應的Provider，更新Provide對應的value，從而觸發(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都會觸發(fā)重新渲染。
setContextValue(newValue)
}
...
return (
<App>
<MyContext.Provider value={contextValue}>
<ConsumerComponent1>
<ConsumerComponent11 updateValue={updateContext}> // 通過回調形式的props, 在ConsumerComponent11中更新contextValue, 因為contextValue屬于最頂層的Provider的值，所以也會觸發(fā)ConsumerComponent1, ConsumerComponent2, ConsumerComponent3重新渲染。
</ComsumerComponent11>
</ConsumerComponent1>
<ConsumerComponent2 />
<ConsumerComponent3 />
</MyContext.Provider>
</App>
);
}
4.3 Provider嵌套
在一些情況下，可能會出現(xiàn)同一個Context的provider嵌套的情況，這時候可以理解為兩個Context。不同的是，
...
const {contextValue, setContextValue} = React.useState(initialValue);
// function to update the context value
function updateContext(newValue) {
// ...
// 更新contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11都會觸發(fā)重新渲染。
setContextValue(newValue)
}
...
return (
<App>
<MyContext.Provider value={contextValue}>
<ConsumerComponent1>
<ConsumerComponent11 />
</ConsumerComponent1>
<ConsumerComponent2>
...
// 如果只希望更新ComsumerComponent21, ComsumerComponent22中的值
const localContextValue = useContext(MyContext); // 從上一層Provider中獲取當前值
const {tempContextValue, setTempContextValue} = React.useState(localContextValue);
function updateTempContext(newValue) {
// 這里更新以后只會觸發(fā)ConsumerComponent21和ConsumerComponent22的重新渲染
setTempContextValue(newValue);
}
// 這里新建Provider，在ConsumerComponent21和ConsumerComponent22之間共享數(shù)據(jù)。
<MyContext.Provider value={tempValue}>
<ConsumerComponent21>
// 在ConsumerComponent21中通過useContext(MyContext)訂閱
// 獲取到的值為離自身最近的那個匹配的Provider中讀取到的Context值,即tempValue
</ConsumerComponent21>
<ConsumerComponent22>
</ConsumerComponent22>
</MyContext.Provider value={contextValue}>
</ConsumerComponent2>
<ConsumerComponent3 />
</MyContext.Provider>
</App>
);
官方文檔
官方文檔請參考下邊的基礎和高級教程。
Hook API 索引 – React (reactjs.org)
以上就是React中的Context應用場景分析的詳細內容，更多關于React中的Context的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了如何基于react實現(xiàn)下拉刷新效果,在下拉的時候會進入loading狀態(tài),文中有詳細的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-03-03
本文主要介紹了React表單容器的通用解決方案，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
react事件綁定時。this并不會指向當前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
這篇文章主要介紹了react如何添加less環(huán)境配置，本文給大家分享遇到問題及解決方案，結合示例代碼圖文給大家介紹的非常詳細，需要的朋友參考下吧2022-05-05
本文主要介紹了React翻頁器的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了淺談React Event實現(xiàn)原理,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了React中classnames庫使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
React hook 'useState' is calle
這篇文章主要為大家介紹了React hook 'useState' is called conditionally報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
react+ts實現(xiàn)簡單jira項目的最佳實踐記錄
這篇文章主要介紹了react+ts實現(xiàn)簡單jira項目，本文通過圖文實例相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-07-07
React tabIndex使非表單元素支持focus和blur事件
這篇文章主要為大家介紹了React使用tabIndex使非表單元素支持focus和blur事件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11