Detailed Explanation of Component Communication in react

Directory parent component and child component communication, child component and parent component communication, cross-component communication, ancestor descendant brother node communication summary

The parent component communicates with the child component

The parent component passes its own state to the child component, and the child component receives it as an attribute. When the parent component changes its own state, the attribute received by the child component will change The parent component makes use of ref to mark the child component, by calling the method of the child component to change the state of the child component, can also call the method of the child component

ref references are defined in parent groups

import React,{Component,createRef} from 'react'
import Child1 from './Child1'
export default class App extends Component {
    constructor(props){
        super(props)
        this.child=createRef()
    }
    render(){
        return(
            <div>
                <Child1 ref={this.child}/>
                <button onClick={this.fn.bind(this)}></button>
            </div>
        )
    }
    fn(){
        const child=this.child.current
        child.setTitle()
    }
}

Sub-components define data sources and modify data source methods

import React,{Component} from 'react'
export default class Child1 extends Component{
    state={
        title:' Title '
    }
    render(){
        return (
            <div>
                {this.state.title}
            </div>
        )
    }
    setTitle(){
        this.setstate({title:'hh'})
    }
}

The child component communicates with the parent component

The parent component passes one of its own methods to the child component, and can do any operation in the method, such as changing the state, and the child component passes through this.props Called after receiving the method of the parent component.

Cross-component communication

In react, there is no event bus similar to vue to solve this problem. 1 is implemented by proxy with their common parent component, but the process will be quite complicated. react provides Context for cross-component communication without explicitly passing props layer by layer through the component tree.

In react, it is difficult to deal with the complicated communication between non-parent and child components, and it is also difficult to deal with the data sharing among multi-components. In practical work, we will use flux, redux and mobx to realize it

Ancestors and descendants

Defining the store class to derive Provider, COnsumer in createContext Publish message in ancestor node: Provider value = arbitrary data Subscribe to the descendant node: Consumer callback function {value = > (Component)}
1. Define the data source store
store.js

import React , {createContext} from 'react'
let {Provider,Consumer} = createContext()
export { 
    Provider,// Publish 
    Consumer// Subscribe 
    }

2. Ancestor nodes

import React ,{Component} from 'react'
import {Provider,Consumer} from './store'
import Son from './Son'
export default class App extends Component{
    constructor(props){
        super(props)
        this.state={
            name:'mingcen'
        }
    }
    render(){
        return (
            <div>
                <Provider value={this.state.name}>
                    <Son/>
                </Provider>
            </div>
        )
    }
}

3. Descendant nodes

import React,{Component} from'react'
import {Consumer} from './store'
export default class Son1 extends Component{
    constructor(props){
        super(props)
        this.state={
            name:'uuu'
        }
    }
    render(){
        return(
            <div>
                <Consumer>
                   {
                        value=>{
                            <div>{value.name}</div>
                        }
                   }
                </Consumer>
            </div>
        )
    }
}

Brother node communication

1 sub-object hanging on the event The other one hangs on the property Change what another component accepts by changing properties through practice

Ancestors

state={
    count:1,
    setCount:()=>{
        this.setState(state=>{
            return{
                count:++state.count
            }
        })
    }
}
render(){
    let {count,setCount} = this.state
    return(
        <div>
            <Provider value={{count,setCount}}>
                <Cmp1></Cmp1>
                <Cmp2></Cmp2>
            </Provider>
        </div>
    )
}

Brother Cmp2

import React, { Component  , createContext} from 'react'
export default class Cmp2 extends Component {
  //  Only the default data is obtained  -->  There is no package in Provider Component 
  static contextType = createContext
  render() {
    return (
      <div>
        <button onClick={this.setCount.bind(this)}> Self-increasing data </button>
      </div>
    )
  }
  setCount() {
    this.context.setCount()
  }
}

Brother Cmp1

<Consumer>
    {
        value => <h3>{value.count}</h3>
    }
</Consumer>

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!