Analysis of Context application scenarios in React

Context definition and purpose

Context provides a way to share data between components without having to explicitly pass props down the component tree.

What data needs to be shared in application scenarios?

Context is designed to share data that is "global" to a tree of components, such as the currently authenticated user, theme, or preferred language.

How to use

1. Create and initialize Context

const MyContext = createContext(defaultValue);

Create a Context object. When React renders a component that subscribes to this Context object, the component reads the current context value from the matching Provider closest to itself in the component tree.

2. Subscribe to Context

<MyContext.Provider value={/* some value*/}>

Provider receives a value attribute and passes it to the consuming component. A Provider can have a corresponding relationship with multiple consumer components. Multiple Providers can also be nested, and the inner ones will overwrite the data of the outer ones.

There are two related concepts here

Provider - A Context provider, or a subscriber to a Context. It can be understood as subscribing to changes in Context values for its internal components through Provider. Once the Context value changes, it will trigger re-rendering of the internal components.
Consumer - Context consumer (consuming component), or Context user. That is, use useContext() inside the Provider to use or consume Context components. These components obtain and use the latest value of Context through useContext().

3. Use Conext

3.1 Use in React components

const value = useContext(MyContext);

Reference the Context in the consuming component. value will read the current Context value from the matching Provider closest to itself in the component tree.

3.2 Use in pure functional components

In a purely functional component, you can use Consumer to reference the value of context. If there is no corresponding Provider in the upper layer, value is equivalent to defaultValue passed to createContext() .

<MyContext.Consumer>
  {value => /* render based on context value */}
</MyContext.Consumer>

4. Context Update

4.1 Updating Context from Top to Bottom

Top-down updating refers to updating the value of the Provider. When value value of the Provider changes, the values obtained through useContext in all consuming components inside it will be automatically updated and trigger re-rendering.

//App.js

// ....

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

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

        // Updating contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11 will trigger re-rendering.
        setContextValue(newValue)
    }

    ...
    return (
        <App>
            <MyContext.Provider value={contextValue}>
                <ConsumerComponent1>
                    <ConsumerComponent11>
    					// ....
                    </ConsumerComponent11>
                </ConsumerComponent1>

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

4.2 Bottom-up (from consuming components) Context update

In some cases, context needs to be updated in a consuming component and adapted to the entire program. For example, modify the UI style through the application's setting component. At this time, it is necessary to pass the update layer by layer to the corresponding Provider through callbacks, update value corresponding to Provide, and thus trigger the update of all related consumer components.

// app.js

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

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

        // Updating contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11 will trigger re-rendering.
        setContextValue(newValue)
    }

    ...
    return (
        <App>
            <MyContext.Provider value={contextValue}>
                <ConsumerComponent1>
                    <ConsumerComponent11 updateValue={updateContext}> // Update contextValue in ConsumerComponent11 through callback props. Because contextValue belongs to the value of the top-level Provider, it will also trigger ConsumerComponent1, ConsumerComponent2, and ConsumerComponent3 to re-render.
                    </ConsumerComponent11>
                </ConsumerComponent1>

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

4.3 Provider Nesting

In some cases, the providers of the same Context may be nested, which can be understood as two Contexts. The difference is,

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

// function to update the context value
function updateContext(newValue) {
    // ...
    
    // Updating contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11 will trigger re-rendering.
    setContextValue(newValue)
}

...
return (
	<App>
        <MyContext.Provider value={contextValue}>
            <ConsumerComponent1>
                <ConsumerComponent11 />
            </ConsumerComponent1>

            <ConsumerComponent2>
                ...
                // If you only want to update the values in ConsumerComponent21 and ConsumerComponent22 const localContextValue = useContext(MyContext); // Get the current value from the upper layer Provider const {tempContextValue, setTempContextValue} = React.useState(localContextValue);

				function updateTempContext(newValue) {
                    // The update here will only trigger the re-rendering of ConsumerComponent21 and ConsumerComponent22 setTempContextValue(newValue); 
                }

				// Create a new Provider here to share data between ConsumerComponent21 and ConsumerComponent22.
                <MyContext.Provider value={tempValue}>
                    <ConsumerComponent21>
                    	// Subscribe in ConsumerComponent21 via useContext(MyContext) // The value obtained is the Context value read from the matching Provider closest to itself, that is, tempValue
                    </ConsumerComponent21>
                    <ConsumerComponent22>
                    </ConsumerComponent22>
				</MyContext.Provider value={contextValue}>
            </ConsumerComponent2>
            <ConsumerComponent3 />
        </MyContext.Provider>
    </App>
);

Official Documentation

For official documentation, please refer to the basic and advanced tutorials below.

Hooks API Index – React (reactjs.org)

Context – React (reactjs.org)

The above is the detailed content of the analysis of Context application scenarios in React. For more information about Context in React, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: