Analyse von Context-Anwendungsszenarien in React

const MyContext = createContext(Standardwert);

<MyContext.Provider-Wert={/* ein Wert*/}>

konstanter Wert = useContext(MeinContext);

<MeinKontext.Verbraucher>
  {value => /* basierend auf Kontextwert rendern */}
</MeinKontext.Verbraucher>

//App.js

// ....

exportiere Standardfunktion App() {
    //...
    
    // 
    const {contextValue, setContextValue} = React.useState(initialValue);

    // Funktion zum Aktualisieren des Kontextwerts
    Funktion updateContext(neuerWert) {
        // ...

        // Das Aktualisieren von contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11 löst ein erneutes Rendering aus.
        setzeKontextwert(neuerWert)
    }

    ...
    zurückkehren (
        <App>
            <MyContext.Provider-Wert={contextValue}>
                <Verbraucherkomponente1>
                    <Verbraucherkomponente11>
    					// ....
                    </ConsumerComponent11>
                </ConsumerComponent1>

                <Verbraucherkomponente2 />
                <ConsumerComponent3 />
            </MeinContext.Provider>
        </App>
    );
    
}

// app.js

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

    // Funktion zum Aktualisieren des Kontextwerts
    Funktion updateContext(neuerWert) {
        // ...

        // Das Aktualisieren von contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11 löst ein erneutes Rendering aus.
        setzeKontextwert(neuerWert)
    }

    ...
    zurückkehren (
        <App>
            <MyContext.Provider-Wert={contextValue}>
                <Verbraucherkomponente1>
                    <ConsumerComponent11 updateValue={updateContext}> // Aktualisieren Sie contextValue in ConsumerComponent11 durch Callback-Eigenschaften. Da contextValue zum Wert des Providers der obersten Ebene gehört, wird auch ein erneutes Rendern von ConsumerComponent1, ConsumerComponent2 und ConsumerComponent3 ausgelöst.
                    </ConsumerComponent11>
                </ConsumerComponent1>

                <Verbraucherkomponente2 />
                <ConsumerComponent3 />
            </MeinContext.Provider>
        </App>
    );
}

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

// Funktion zum Aktualisieren des Kontextwerts
Funktion updateContext(neuerWert) {
    // ...
    
    // Das Aktualisieren von contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11 löst ein erneutes Rendering aus.
    setzeKontextWert(neuerWert)
}

...
zurückkehren (
	<App>
        <MyContext.Provider-Wert={contextValue}>
            <Verbraucherkomponente1>
                <Verbraucherkomponente11 />
            </ConsumerComponent1>

            <Verbraucherkomponente2>
                ...
                // Wenn Sie nur die Werte in ConsumerComponent21 und ConsumerComponent22 aktualisieren möchten const localContextValue = useContext(MyContext); // Holen Sie sich den aktuellen Wert vom Provider der oberen Ebene const {tempContextValue, setTempContextValue} = React.useState(localContextValue);

				Funktion updateTempContext(neuerWert) {
                    // Das Update hier löst nur das erneute Rendern von ConsumerComponent21 und ConsumerComponent22 aus. setTempContextValue(newValue); 
                }

				// Erstellen Sie hier einen neuen Provider, um Daten zwischen ConsumerComponent21 und ConsumerComponent22 zu teilen.
                <MyContext.Provider-Wert={tempValue}>
                    <Verbraucherkomponente21>
                    	// Abonnieren Sie in ConsumerComponent21 über useContext(MyContext) // Der erhaltene Wert ist der Kontextwert, der vom ihm am nächsten liegenden passenden Provider gelesen wird, also tempValue
                    </ConsumerComponent21>
                    <Verbraucherkomponente22>
                    </ConsumerComponent22>
				</MyContext.Provider-Wert={contextValue}>
            </ConsumerComponent2>
            <ConsumerComponent3 />
        </MeinContext.Provider>
    </App>
);