How to use the context in react_is the context of react a one-way data flow_tsuyoii’s blog

class=”markdown_views prism-atom-one-dark”>

context can be used to pass parameters from parent components to child components or from grandparent components to grandchild components.
Note that data flow is one-way, and child components cannot be passed to parent components

Usage:

1. In the parent component MyComponent

const AContext = React.createContext(initial value)
 function MyComponent(){
     
     render (){
     
         AContext.provider value={
     this.state}   //You can pass an object
             B/B
          /AContext.provider>
     }
 }
 

2. const AContext = React.createContext (initial value)//The initial value here is similar to the initial value of useState, you can pass an empty value

 AContext.provider value={
     this.state}   //You can pass an object
       B/B
   /AContext.provider>
 

4. At this time, if component B contains subcomponent C, you don’t need to specify the data that needs to be passed down, and C will get the
   subcomponent B component by default

function B(){
     
     return(
         C/C
     );
 }
 

5. Specify the contextType to read the current context value, and React will find the nearest Provider to the upper layer
   In the grandson component C
   Introduce AContext from the parent component MyComponent

function C(){
     
         static contextType = AContext;
         render (){
     
             return <Button theme={
     this.context}   //theme value is this.state in the parent component MyComponent component
         }
 }
 

Compared with props and state, React’s Context can realize cross-level component communication

https://zhuanlan.zhihu.com/p/110331535
https://zh-hans.reactjs.org/docs/context.html