Component communication between parent and child

The parent component passes data to the child component through props. The child component can only be used to show or judge, but not to update. When the child component needs to notify the parent of data changes, the parent component passes the function as a prop, and the child component only needs to call it as needed

Communication between non-parent and child components

Context provides a way to pass data between components in the tree without having to manually add props to each layer of components.

React.createContext

Create a Context object.

const MyContext = React.createContext(defaultValue); DefaultValue is not just a value. It can also be an object {value, changeValue()}Copy the code

When React renders a component subscribed to the Context object, the component reads the current Context value from the closest matching Provider in the component tree.

The defaultValue parameter takes effect only if the component does not match the Provider in the tree. This helps to test components without wrapping them with a Provider. Note: When undefined is passed to the Provider’s value, the consumer component’s defaultValue does not take effect.

Provider < myContext. Provider value={/* some value */}> < consume component /> </ myContext. Provider>Copy the code

Each Context object returns a Provider React component, which allows the consuming component to subscribe to changes to the Context.

The Provider receives a value property and passes it to the consuming component. A Provider can be associated with multiple consumer components. Multiple providers can also be nested, with the inner layer overwriting the data in the outer layer.

When a Provider’s value changes, all of its internal consuming components are rerendered. Both the Provider and its internal consumer component are not subject to the shouldComponentUpdate function, so the consumer component can update if its ancestor exits updating.

When the parent of the Provider is re-rendered, all the consuming components below are re-rendered, even if the Provider’s value is not changed. To avoid this, consider binding the Provider’s value to the parent component’s state first. This will not happen when the parent component rerenders because the value is a new object causing a rendering of the consuming component. That’s the official explanation, but it’s not actually the case. Context.Provider is a component after all, and it follows the basic rules of a component. When a value changes, it does not cause a child component to render. The premise is that the child component as a property (this.props. Children) also remains the same. If the child component changes, the context. Provider doesn’t know if you’re the same person and has to be redrawn. When you look at the notes on the official website, you will see that the code is presented as a separate Provider component, and there is no description of the internal composition of a separate Provider component. The specific explanation

const MyContext = React.createContext('light');

class Provider extende React.Component{
  constructor(){
    this.state = {
      value:'dark'
    }
  }
  render (){
    return (
      <MyContext.Provider value={this.state.value}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

class MyContextRoot extende React.Component{
  render (){
    return (
      <Provider>
        <Child />
      </Provider>
    )
  }
}
Copy the code

Class.contextType

The contextType property mounted on the class is reassigned to a Context object created by react.createcontext (). Note that this method can only mount one context, and if you need more than one, use context.consumer for multiple layers of nesting

Method one:

This allows you to use this.context to consume the value of the most recent context. You can access it in any lifecycle, including the Render function.

class MyClassContext extende Component {
  var value = this.context;
}
MyClassContext.contextType = MyContext
Copy the code

Method 2:

You can bind with the static method (class Fields)

class MyClassContext extende Component{
  static mycontext = MyContext;
}
Copy the code

Context.Consumer

A React functional component can subscribe to changes to the context, which allows you to subscribe to the context in a functional component. The class component also subscribes to multiple contexts in this way

function MyFuncContext(){
  return (
    <MyContext.Consumer>
      {(value)=>({
        <span>{value}</span>
      })}
    </MyContext.Consumer>
  )
}
Copy the code

This method requires a function as a child. This function takes the current context value and returns a React node. The value passed to the function is equivalent to the value provided by the Provider at the top of the component tree closest to the context. If there is no Provider, the value argument is equivalent to the defaultValue passed to createContext().

Context.displayName

The context object accepts a property named displayName, of type string. React DevTools uses this string to determine what context is to display.

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';
Copy the code

The code address