How do parent and child components communicate?

// Subcomponent: Child const Child =>{return <p>{props. Name}</p>} // Parent const Parent = ()=>{return <Child Name ="react"></Child>} Parent communicates to Child components: The parent passes needed information to the Child components via props.Copy the code
// Subcomponent: Child const Child =>{props =>{callback(MSG)}} return (<button onClick={cb(" hello!")) Parent class Parent extends Component {callback(MSG){console.log(MSG)} render(){return <Child callback={this.callback.bind(this)}></Child>}} How the Child component communicates with the parent: : props+ callbackCopy the code

How do cross-level components communicate?

The parent component communicates to the children of the children, and to the deeper children:

  • If the parent component has a deep structure, each layer of the intermediate component needs to pass props, which increases the complexity and is not required by the intermediate component itself.
  • Context is a large container in which you can put the content you want to communicate, so that no matter how deep the nesting, you can use context for global data that spans multiple layers.
// Context is designed to share data that is "global" to a component tree const BatteryContext = createContext(); Class GrandChild extends Component {render(){return (< batteryContext.consumer > {color => <h1 Style ={{"color":color}}> I am red :{color}</h1>}</ batteryContext.consumer >)}} // Child const Child = () =>{return () Class Parent extends Component {state = {color :"red"} render(){const {color} = this.state return ( <BatteryContext.Provider value={color}> <Child></Child> </BatteryContext.Provider> ) } }Copy the code

How do non-nested relational components communicate?

That is, components that do not have any containment relationships, including sibling components and non-sibling components that are not in the same parent.

  • Custom event communication can be used (publish subscribe mode)
  • Global state management can be done through redux and so on
  • If the sibling component communicates, you can find the common parent node of the two sibling nodes and communicate with the parent and child communication mode.

How to solve the problem that the props level is too deep

  • Using the Context API: provides a way to share state between components without having to pass props layer by layer through an explicit component tree;
  • Use state libraries such as Redux.

How components communicate

  • Parent component communicates with its children: A parent component communicates with its children by props

  • A child component communicates with its parent: the parent component communicates with its props () function. This function is a function of the parent component itself. The child component calls this function and passes the information that the child component wants to pass as parameters to the parent component

  • Sibling component communication: find the common parent node of the two sibling nodes and communicate with the parent node by forwarding information in combination with the above two methods

  • Communication across hierarchies: Context is designed to share data that is “global” to a component tree, such as the currently authenticated user, topic, or preferred language, and is ideal for communicating global data across multiple layers

  • Publish and subscribe: Publishers publish events, subscribers listen for events and react to them, and we can communicate by introducing the Event module

  • Global state management tools: Communicate with global state management tools such as Redux or Mobx, which maintain a global state center Store and generate new states based on different events