React 中组件通信的方法

React中组件通信有几种常见的情况：

1、父组件向子组件通信

父组件通过 props 向子组件传递需要的信息。

// 子组件: Child
const Child = props =>{
  return <p>{props.name}</p>
}

// 父组件 Parent
const Parent = ()=>{
    return <Child name="react"></Child>
}

2、子组件向父组件通信

props + 回调的方式传递需要想信息

// 子组件: Child
const Child = props =>{
  const cb = msg =>{
      return ()=>{
          props.callback(msg)
      }
  }
  return (
      <button onClick={cb("你好!")}>你好</button>
  )
}
// 父组件 Parent
class Parent extends Component {
    callback(msg){
        console.log(msg)
    }
    render(){
        return <Child callback={this.callback.bind(this)}></Child>    
    }
}

3、跨级组件通信

        （1）使用 props，利用中间组件层层传递，但是如果父组件结构较深，那么中间每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是中间组件自己需要的。（不推荐）

        （2）使用 context，可以吧通信的内容放在 context 中，这样不管嵌套多深，都可以随意取用，对于跨越多层的全局数据可以使用 context 实现

// context方式实现跨级组件通信 
// Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据
const BatteryContext = createContext();
//  子组件的子组件 
class GrandChild extends Component {
    render(){
        return (
            <BatteryContext.Consumer>
                {
                    color => <h1 style={{"color":color}}>我是红色的:{color}</h1>
                }
            </BatteryContext.Consumer>
        )
    }
}
//  子组件
const Child = () =>{
    return (
        <GrandChild/>
    )
}
// 父组件
class Parent extends Component {
      state = {
          color:"red"
      }
      render(){
          const {color} = this.state
          return (
          <BatteryContext.Provider value={color}>
              <Child></Child>
          </BatteryContext.Provider>
          )
      }
}

4、非嵌套组件关系的通信

        （1）可以使用自定义时间通信（发布订阅模式）

        （2）可以通过 redux 等进行全局状态管理

        （3）如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点，结合父子间通信方式进行通信。

总结：组件通信的方式有：

父组件向子组件通讯：父组件可以向子组件通过 props 的方式，向子组件进行通讯。

子组件向父组件通讯：props + 回调的方式，父组件向子组件传递 props 进行通讯，此 props 为作用域为父组件自身的函数，字组件调用该函数，将子组件想要传递的信息作为参数，传递到父组件的作用域中

跨层级通讯：context 设计的目的是为了共享那些对于一个组件树而言是“全局”的数据，对于跨越多层全局数据通过 context 通信再合适不过

发布订阅模式：发布者发布时间，订阅者监听时间并作出反应，我们可以通过引入 event 模式进行通信

全局状态管理工具：借助 Reudx 或者 Mobx 等全局管理工具进行通信，这种工具会维护一个全局状态中心 Store，并根据不同的事件产生新的状态