五、组件通信

一、父子组件通信方式

1. props传递数据(父传子)与props传递方法(子传父)

2. ref标记 (父组件拿到子组件的引用，从而调用子组件的方法)

二、非父子组件通信方式

1. 状态提升(中间人模式)

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.

2.发布订阅模式(原生js)

var bus={
  list:[],
  subscribe(callback){
    // console.log('callback');
    this.list.push(callback)
  },

  publich(text){
    this.list.forEach(item=>{
      item && item(text)
    })
  }
}

//订阅者
bus.subscribe((value)=>{
   console.log("11订阅",value);
})
bus.subscribe((value)=>{
  console.log("22订阅",value);
})


//发布者
bus.publich("1111")
bus.publich("2222")

3.context状态树传参(生产者消费者模式)

• 先定义全局context对象

let GlobalContext = React.createContext();

• 根组件引入GlobalContext，并使用GlobalContext.Provider（生产者）

<GlobalContext.Provider
        value={{
                name:'admin',
                age:12,
        }}
>
        <div>
                根组件
                <Child></Child>
        </div>
</GlobalContext.Provider>

• 任意组件引入GlobalContext并调用context，使用GlobalContext.Consumer（消费者）

<GlobalContext.Consumer>
        {(value) => {
                return (
                        <div>
                                {value.name}---{value.age}
                        </div>
                );
        }}
</GlobalContext.Consumer>