React--React中组件间的如何通信？

我们之前说过React是一个组件至上的技术栈，所以，组件之间的通信就是大家关注的话题。主要有以下几种：

父子组件

父子组件的传值通过props来实现。

var parent = () => {
    let name = "I'm Lee!"
    return (
        <div>
            <Child name="{name}"/>
        </div>
    )
}

var child = (props) => {
    return (
        <div>
            {
                props.name
            }
        <div>
    )
}

子父组件

子父组件的通信主要是通过callback来实现。

var parent = () => {
    const onChildClick = (item) => {
        console.log(item) //    点我
    }
    return (
        <div>
            <Child callback={onChildClick}/>
        </div>
    )
}

var child = props => {
    return (
        <div>
            <button onClick={ props.callback('点我') }>点我</button>
        </div>
    )
}

父孙组件

父孙组建有俩中方式：

• 以父子组件传值的方式，层层向下传递；
• context上下文的方式：

  const context = createContext()
  var parent = () => {
      const [count, setCount] = useState(0)
      return (
          <div>
              <context.Provider value={ count }>
                  <Child />
              </context.Provider>
          </div>
      )
  }
  var child = () => {
      return (
          <div>
              <Son />
          </div>
      )
  }
  var son = () => {
      return (
          <context.Consumer>
              {
                  count => <p>{count}</p>
              }
          </context.Consumer>
      )
  }

  无关(兄弟)组件

  非嵌套关系的组件通信主要有以下三种方式：
• 兄弟组件，可以通过找到共同的父组件，通过父子，子父组件的方式实现通信
• 可以通过redux, mobx, recoil等全局状态库来实现全局状态管理
• 可以通过自定义事件（发布订阅）