React组件通信方式

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

// children props
// render props

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

兄弟组件通信：找到这两个兄弟节点的共同父节点，结合上面2种方式由父节点转发信息进行通信

发布订阅模式：发布者发布事件，订阅者监听事件并做出反应，可以引入event模块进行通信

import PubSub from 'pubsub-js'

// 发布消息
  PubSub.publish('query', data)

//订阅消息
  PubSub.subscribe('query', (_, data) => {
    console.info(data)
  })

跨层级通信：Context设计目的目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证用户信、主题或首选语言

// 创建容器
const XxContext = React.createContext()

// 渲染子组件时，外面包裹xxxContext.Provider,通过value属性给后代组件传递数据
<XxContext.Provider value={data}>
    子组件
</XxContext.Provider>

// 读取
// 1. 仅适用于类组件
static contextType = XcContext // 声明
this.context // 读取
// 2.函数组件和类组件都可用
<XxContent.Consumer>
    {value => {}}
</XxContent.Consumer>
// 3.函数组件
const {name} = useContext(XxContext)

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