Reactにおけるコンテキスト適用シナリオの分析

定数MyContext = createContext(デフォルト値);

<MyContext.Provider value={/* 何らかの値*/>

定数値 = useContext(MyContext);

<MyContext.コンシューマー>
  {value => /* コンテキスト値に基づいてレンダリング */
</MyContext.Consumer>

//アプリ.js

// ....

デフォルト関数App()をエクスポートする{
    //...
    
    // 
    const {contextValue, setContextValue} = React.useState(initialValue);

    // コンテキスト値を更新する関数
    関数 updateContext(newValue) {
        // ...

        // contextValue、ConsumerComponent1、ConsumerComponent2、ConsumerComponent3、ConsumerComponent11 を更新すると、再レンダリングがトリガーされます。
        setContextValue(新しい値)
    }

    ...
    戻る （
        <アプリ>
            <MyContext.Provider 値 = {contextValue}>
                <コンシューマーコンポーネント1>
                    <コンシューマーコンポーネント11>
    					// ....
                    </コンシューマーコンポーネント11>
                </コンシューマーコンポーネント1>

                <コンシューマーコンポーネント2 />
                <コンシューマーコンポーネント3 />
            </MyContext.Provider>
        </アプリ>
    );
    
}

// アプリ.js

デフォルト関数App()をエクスポートする{
    ...
    const {contextValue, setContextValue} = React.useState(initialValue);

    // コンテキスト値を更新する関数
    関数 updateContext(newValue) {
        // ...

        // contextValue、ConsumerComponent1、ConsumerComponent2、ConsumerComponent3、ConsumerComponent11 を更新すると、再レンダリングがトリガーされます。
        setContextValue(新しい値)
    }

    ...
    戻る （
        <アプリ>
            <MyContext.Provider 値 = {contextValue}>
                <コンシューマーコンポーネント1>
                    <ConsumerComponent11 updateValue={updateContext}> // コールバック プロパティを通じて ConsumerComponent11 の contextValue を更新します。contextValue は最上位レベルの Provider の値に属しているため、ConsumerComponent1、ConsumerComponent2、および ConsumerComponent3 の再レンダリングもトリガーされます。
                    </コンシューマーコンポーネント11>
                </コンシューマーコンポーネント1>

                <コンシューマーコンポーネント2 />
                <コンシューマーコンポーネント3 />
            </MyContext.Provider>
        </アプリ>
    );
}

...
React のコンテキスト値を設定します。

// コンテキスト値を更新する関数
関数 updateContext(newValue) {
    // ...
    
    // contextValue、ConsumerComponent1、ConsumerComponent2、ConsumerComponent3、ConsumerComponent11 を更新すると、再レンダリングがトリガーされます。
    setContextValue(新しい値)
}

...
戻る （
	<アプリ>
        <MyContext.Provider 値 = {contextValue}>
            <コンシューマーコンポーネント1>
                <コンシューマーコンポーネント11 />
            </コンシューマーコンポーネント1>

            <コンシューマーコンポーネント2>
                ...
                // ConsumerComponent21 と ConsumerComponent22 の値のみを更新する場合 const localContextValue = useContext(MyContext); // 上位層プロバイダーから現在の値を取得します const {tempContextValue, setTempContextValue} = React.useState(localContextValue);

				関数 updateTempContext(newValue) {
                    // ここでの更新は ConsumerComponent21 と ConsumerComponent22 の再レンダリングのみをトリガーします setTempContextValue(newValue); 
                }

				// ここで ConsumerComponent21 と ConsumerComponent22 間でデータを共有するための新しいプロバイダーを作成します。
                <MyContext.Provider 値 = {tempValue}>
                    <コンシューマーコンポーネント21>
                    	// ConsumerComponent21 で useContext(MyContext) 経由でサブスクライブします // 取得される値は、自身に最も近い一致するプロバイダーから読み取られたコンテキスト値、つまり tempValue です
                    </コンシューマーコンポーネント21>
                    <コンシューマーコンポーネント22>
                    </コンシューマーコンポーネント22>
				</MyContext.Provider 値 = {contextValue}>
            </コンシューマーコンポーネント2>
            <コンシューマーコンポーネント3 />
        </MyContext.Provider>
    </アプリ>
);