Detailed explanation of component communication in react

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()
    }
}

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'})
    }
}

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

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>
        )
    }
}

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>
        )
    }
}

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>
    )
}

import React, { Component , createContext } from 'react'
export default class Cmp2 extends Component {
  // Only got the default data --> not wrapped in the Provider component static contextType = createContext
  render() {
    return (
      <div>
        <button onClick={this.setCount.bind(this)}>Auto-increment data</button>
      </div>
    )
  }
  setCount() {
    this.context.setCount()
  }
}

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