What is the usage of context in react

In react, context is used to share data and allows data to be passed across generations; context provides a new way to share data between components without having to explicitly pass props through the component tree layer by layer. , which can avoid using a large number of repeated props to pass values.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the usage of context in react

Context provides a new way to share data between components, allowing data to be passed from generation to generation without having to explicitly pass through the component tree layer by layer. Pass props.

Context provides a way to share values ​​between components without having to explicitly pass props through the layers of the component tree. If the levels of obtaining the value and using the value are far apart, or the components that need to use the value are many and scattered, you can use Context to share data and avoid using a large number of repeated props to pass the value. If only one component needs to use this value, you can generate the component at the location where the value is generated, and then use props to pass it layer by layer to the location where the component is actually displayed.

Basic usage

1. Custom Context

import React from 'react';
 
const ThemeContext = React.createContext('light');
 
export default ThemeContext;

The above code defines a ThemeContext, the default value is 'light'.

2. Use the Context Provider where needed

import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
 
function App() {
  return (
    <ThemeContext.Provider value=&#39;dark&#39;>
      <div className="App">
        <header className="App-header">
          <ThemedButton />
        </header>
      </div>
    </ThemeContext.Provider>
  );
}
 
export default App;

Use the custom Context Provider at the outermost layer of the component, and the incoming value overrides the default value , then the value of ThemeContext read by the subcomponent is 'dark' instead of the default value 'light'. If the Provider has a value definition, the value of the value will be used (even if the value is undefined, that is, no value is passed in). The default value of the definition will be used only when the Provider does not provide it.

3. Define contextType and use the value on the obtained Context

import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
 
class ThemedButton extends Component {
static contextType = ThemeContext;
render() {
return <button>{this.context}</button>;
}
}
 
export default ThemedButton;

ThemedButton declares that the contextType is ThemeContext, so the value of this.context is the nearest ThemeContext provided The value is 'light'.

Rendering:

Recommended learning: "react video tutorial"

The above is the detailed content of What is the usage of context in react. For more information, please follow other related articles on the PHP Chinese website!