React父子组件间的通信是怎样进行的

//父组件
 <Field label="用户名"></Field>
//子组件
 <label>{this.props.label}</label>

//子组件
<input onChange={(evt)=>{
   this.props.onChangeEvent(evt.target.value)
}}></input>
//父组件
 <Field onChangeEvent={(value)=>{
    console.log(value)
 }}></Field>

//子组件中
 state={
     value:''
 }
 <input onChange={(evt)=>{
   this.setState({
       value:evt.target.value
   })
}}></input>
//父组件
username = React.createRef()
<Field ref={this.username}></Filed>
....
console.log(this.username.current.state.value)

clear(){
    this.setState({
        value:''
    })
}
 <input value={this.state.value}></input>
....................
this.username.current.clear()//父

var bus={
	list:[]，//放入所有的订阅
	//订阅
    subscribe(callback){
         this.list.push(callback)
        //callback为注册订阅的回调函数
    }
	//发布
	publish(){
    }
}

//创建订阅的回调函数
subscribe(callback){
   console.log(callback);
   this.list.push(callback)
}
//订阅者
bus.subscribe((value)=>{
    console.log(111,value);
})
bus.subscribe((value)=>{
    console.log(222,value);
})

//创建bus（调度中心）中的发布函数
publish(text){
        //遍历所有的list,将回调函数执行
        // console.log(this.list);
        this.list.forEach(callback=>{
            callback && callback(text)
        })
    }
//发布者
setTimeout(()=>{
    bus.publish('沉默')
},0)

const GlobalContext = React.createContext()

//格式
state={
    info:'111'
}
render(){
    return(
        <GlobalContext.Provider value={{
        	//key:value或key:函数
        }}>
        	<div>父组件内容</div>
        </GlobalContext.Provider>
    )
}

//格式
render(){
     return(
       <GlobalContext.Consumer>
        {
            (value)=>{
                return(
                    <div onClick={()=>{
                       
                      }}>
                    </div>
                )
            }
        }
       </GlobalContext.Consumer>
    )
}

//子组件A中  调用回调函数，传递数据
value.chageInfo(synopsis)
//父组件
state={
        info:111
}
......................................
<GlobalContext.Provider value={{
     "name":"说名字",
     "info":this.state.info,
     chageInfo:(content)=>{
         this.setState({
             info:content
         })
     }
}}>

 <GlobalContext.Consumer>
        {
            (value)=><div className="filmDetail">
                //接受Provider的数据
                    detail-{value.info}
                </div>
        }
 </GlobalContext.Consumer>

<Child>
    <div>111</div>
    <div>22</div>
    <div>333</div>
</Child>

this.props.children
//该属性中包含子组件标签开始到结束之间的内容

export default class App extends Component {
  render() {
    return (
      <div>
        <Child>
            <div>111</div>
            <div>22</div>
            <div>333</div>
        </Child>
      </div>
    )
  }
}

class Child extends Component{
    render(){
        return(
            <div>
                child
                 {this.props.children}
            </div>
        )
    }
}

//父组件
<Child>
            <div>111</div>
            <div>22</div>
            <div>333</div>
</Child>
//子组件
<div>
    child
    <h3>以下获得所有内容</h3>
     {this.props.children}
     <h3>以下获得数组其中的元素</h3>
     {this.props.children[1]}
</div>