快捷導(dǎo)航

React中的Context應(yīng)用場(chǎng)景分析

更新時(shí)間：2021年06月11日 10:07:23 作者：moakap

這篇文章主要介紹了React中的Context應(yīng)用場(chǎng)景分析,Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過組件樹的逐層傳遞 props，通過實(shí)例代碼給大家介紹使用步驟，感興趣的朋友跟隨小編一起看看吧

Context定義和目的

Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過組件樹的逐層傳遞 props。

應(yīng)用場(chǎng)景哪些數(shù)據(jù)會(huì)需要共享？

Context 設(shè)計(jì)目的是為了共享那些對(duì)于一個(gè)組件樹而言是**“全局”的數(shù)據(jù)**，例如當(dāng)前認(rèn)證的用戶、主題或首選語言。

使用步驟

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的訂閱者。可以理解為通過Provider為其內(nèi)部組件訂閱了Context值的變動(dòng)，一旦Context值有變化，就會(huì)觸發(fā)內(nèi)部組件重新渲染。
Comsumer - Context消費(fèi)者（消費(fèi)組件），或者叫Context使用者。即在Provider內(nèi)部使用useContext()來使用或消費(fèi)Context的組件。這些組件通過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來引用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)通過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è)程序。比如通過應(yīng)用程序的setting組件修改UI風(fēng)格。這時(shí)就需要通過回調(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}> // 通過回調(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中通過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)

Context – React (reactjs.org)

以上就是React中的Context應(yīng)用場(chǎng)景分析的詳細(xì)內(nèi)容，更多關(guān)于React中的Context的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: