Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use context in react", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use context in react" article.

In react, context is used to share data and allows data to be passed from generation to generation; context provides a new way to share data between components without explicitly passing props layer by layer through the component tree, avoiding the use of a large number of duplicate props to pass values.

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

What is the use of context in react

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

Context provides a way to share values between components without explicitly passing props layer by layer through the component tree. If the level at which the value is obtained is far away from the level at which the value is used, or if many components that need to use this value are scattered, you can use Context to share data and avoid using a large number of duplicate props to pass values. If only one component needs to use this value, you can generate the component at the location where the value is generated, and then pass it layer by layer with props to the location where the component is actually displayed.

Basic mode of use

1. Custom Context

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

The above code defines a ThemeContext with a default value of 'light'.

2. Use Context's Provider where needed

Import ThemeContext from'. / context/ThemeContext.js';import ThemedButton from'. / ThemedButton.js';import'. / App.css'; function App () {return ();} export default App

The Provider of the custom Context is used on the outermost part of the component, the default value is overridden by the incoming value, and then the value of the ThemeContext read by the subcomponent is' dark' instead of the default 'light'. If Provider has a value definition, the value of value is used (that is, the value is undefined, that is, no value is passed in), and the default value of the definition is used only if the Provider is not provided.

3. Define the 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 {this.context};}} export default ThemedButton

ThemedButton declares that contextType is ThemeContext, so the value of this.context is the value provided by the most recent ThemeContext, which is' light'.

Effect picture:

The above is about the content of this article on "how to use context in react". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.