Analysis of Context application scenarios in React

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:
  • Let's talk about my understanding and application of React Context
  • Use react context to implement vue slot function
  • A brief comparison of Props in React
  • How to use and limit props in react
  • Detailed explanation of the use of props in React's three major attributes
  • React's context and props explained

<<:  Install MySQL in Ubuntu 18.04 (Graphical Tutorial)

>>:  MySQL 8.0 download and installation configuration graphic tutorial under Windows 10

Recommend

CSS3 realizes the animation effect of lotus blooming

Let’s look at the effect first: This effect looks...

Vue realizes price calendar effect

This article example shares the specific code of ...

MySQL database aggregate query and union query operations

Table of contents 1. Insert the queried results 2...

Velocity.js implements page scrolling switching effect

Today I will introduce a small Javascript animati...

In-depth explanation of MySQL learning engine, explain and permissions

engine Introduction Innodb engine The Innodb engi...

IDEA configuration process of Docker

IDEA is the most commonly used development tool f...

Detailed explanation of how to solve the position:fixed fixed positioning offset problem

question CSS fixed positioning position:fixed is ...

CSS automatically intercepts the specified length string and displays the end... Support FF browser

<style type="text/css"> Copy code ...

Detailed explanation of the reasons and solutions for Docker failing to start normally

1. Abnormal performance of Docker startup: 1. The...

Docker+nextcloud to build a personal cloud storage system

1. Docker installation and startup yum install ep...

MySQL million-level data paging query optimization solution

When there are tens of thousands of records in th...

Code analysis of synchronous and asynchronous setState issues in React

React originated as an internal project at Facebo...

Detailed example of concatenating multiple fields in mysql

The MySQL query result row field splicing can be ...

The difference between delete, truncate, and drop and how to choose

Preface Last week, a colleague asked me: "Br...

Linux sftp command usage

Concept of SFTP sftp is the abbreviation of Secur...