React中的Context應用場景分析

阿新 • • 發佈：2021-06-15

Context定義和目的

Context 提供了一種在元件之間共享資料的方式，而不必顯式地通過元件樹的逐層傳遞 props。

應用場景哪些資料會需要共享？

Context 設計目的是為了共享那些對於一個元件樹而言是**“全域性”的資料**，例如當前認證的使用者、主題或首選語言。

使用步驟

1. 建立並初始化Context

const MyContext = createContex(defaultValue);

建立一個 Context 物件。當 React 渲染一個訂閱了這個 Context 物件的元件，這個元件會從元件樹中離自身最近的那個匹配的 Provider 中讀取到當前的 context 值。

2. 訂閱Context

<MyContext.Provider value={/* 某個值 */}>

Provider 接收一個 value 屬性，傳遞給消費元件。一個 Provider 可以和多個消費元件有對應關係。多個 Provider 也可以巢狀使用，裡層的會覆蓋外層的資料。

這裡有兩個相關的概念

Provider - Context提供者，或Contehttp://www.cppcns.comxt的訂閱者。可以理解為通過Provider為其內部元件訂閱了Context值的變動，一旦Context值有變化，就會觸發內部元件重新渲染。
Comsumer - Context消費者（消費元件），或者叫Context使用者。即在Provider內部使用useContext()

來使用或消費Context的元件。這些元件通過useContext()獲取、使用Context的最新值。

3. 使用Conext

3.1 React元件中使用

const value = useContext(MyContext);

在消費元件中引用Context。value會從元件樹中離自身最近的那個匹配的Provider中讀取到當前的Context值。

3.2 純函式式元件中使用

在純函式式的元件中，可以使用Consumer來引用context的值。如果沒有上層對應的Provider，value等同於傳遞給createContext()的defaultValue.

<MyContext.Consumer>
  {value => /* 基於 context 值進行渲染*/}
</MyContext.Consumer>

4. Context的更新

4.1 自上而下更新Context

自上而下更新指的是更新Provider的value值。當 Provider 的 value 值發生變化時，它內部的所有消費元件內通過useContext獲取到的值會自動更新，並觸發重新渲染。

//App.js

/http://www.cppcns.com/ ....

export default function App() {
    //...
    
    // 
    const {contextValue,setContextValue} = React.useState(initialValue);

    // function to update the context value
    function updateContext(newValue) {
        // ...

        // 更新contextValue,ConsumerComponent1,ConsumerComponent2,ConsumerComponent3,ConsumerComponent11都會觸發重新渲染。
        setContextValue(newValue)
    }

    ...
    return (
        <App>
            <MyContext.Provider value={contextValue}>
                <ConsumerComponent1>
                    <ConsumerComponent11>
    					// ....
                    </ComsumerComponent11>
                </Consu程式設計客棧merComponent1>

                <ConsumerComponent2 />
                <ConsumerComponent3 />
            </MyContext.Provider>
        </App>
    );
    
}

4.2 自下而上（從消費元件）更新Context

在某些情況下，需要在某個消費元件內更新context，並且適配到整個程式。比如通過應用程式的setting元件修改UI風格。這時就需要通過回撥將更新一層層傳遞到對應的Provider，更新Provide對應的value，從而觸發所有相關消費元件的更新。

// app.js

export default function App() {
    ...
    const {contextValue,ConsumerComponent11都會觸發重新渲染。
        setContextValue(newValue)
    }

    ...
    return (
        <App>
            <MyContext.Provider value={contextValue}>
                <ConsumerComponent1>
                    <ConsumerComponent11 updateValue={updateContext}> // 通過回撥形式的props,在ConsumerComponent11中更新contextValue,因為contextValue屬於最頂層的Provider的值，所以也會觸發ConsumerComponent1,ConsumerComponent3重新渲染。
                    </ComsumerComponent11>
                </ConsumerComponent1>

                <ConsumerComponent2 />
                <ConsumerComponent3 />
            </MyContext.Provider>
        </App>
    );
}

4.3 Provider巢狀

在一些情況下，可能會出現同一個Context的provider巢狀的情況，這時候可以理解為兩個Context。不同的是，

...
const {contextValue,setContextValue} = React.useState(initialValue);

// function to update the context value
function updateContext(newValue) {
    // ...
    
    // 更新contextValue,ConsumerComponent11都會觸發重新渲染。
    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)www.cppcns.com {
                    // 這裡更新以後只會觸發ConsumerComponent21和ConsumerComponent22的重新渲染
                    setTempContextValue(newValue); 
                }

				// 這裡新建Provider，在ConsumerComponent21和ConsumerComponent22之間共享資料。
                <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)

Context – React (reactjs.org)

以上就是React中的Context應用場景分析的詳細內容，更多關於React中的Context的資料請關注我們其它相關文章！