如何在React中实现类似Context的组件间通信

我们要使用react-dispatch，这是一个轻量级，速度快和高效的事件监听器库，用于通过组件向上和向下以及横向发送数据🔥
类似 Node.js EventEmitter 一样，但不同的是这里使用的是dispatch,subscribe， 调度，订阅（如订阅模式）， 而不是on,emit，这主要还是api上的区别。

在 React 或 Vue 中，我们都知道如何传递props来管理应用程序内的数据流。但有时，有兄弟组件，他们不在对方内部。这种情况我们通常使用一些数据管理库，如 Redux 或Context Api。但是，这通常花费更多的时间和更多的代码来起步。react-dispatch is made for this, 它让开发人员更加便捷的享受，context的好处，实现组件横向通信。

这次我们要使用的是react-dispatch这个库，它集成了dispatch,subscribe,once,off等函数

npm i react-dispatch

或者

yarn add react-dispatch

示例

import React,{ useState, useEffect } from 'react'
import { dispatcher } from 'react-dispatch'

const UPDATE = 'update' // good to import constant file outside

const App  = () => {
	const onClick = () => dispatcher.dispatch(UPDATE, 'hi,i am here!')
	return(
       <button onClick={onClick}>dispatch Me.</button>
    )
  
}

const AppBrotherComponent = () => {
    const [data, setData] = useState('')

    useEffect(() => {
        dispatcher.subscribe(UPDATE, res => setData(res));
        // whenever it receives a dispatch, it will fire the callback. 
        return () => {
            dispatcher.off(UPDATE)
        }
    },[])

    return (
        <p>
        Data received fromm dispatch: {data}
        </p>
    )
}
export default App

//dispatch接收两个参数，第一个是字符串，第二个是你想要传递的值，可以是数字，字符串，对象等
dispatcher.dispatch(string:string, data:any)

//监听方法接收两个参数，第一个是dispatch过来的值，需要完全一致，第二个是要给dispatch的回调函数
dispatcher.subscribe(string:string, callback)

//类似于监听函数，但是once只会执行一次，执行过后会执行off函数，并销毁
dispatcher.once(string:string, callback)

//当组件卸载时调用，用以清理内存
dispatcher.off(string:string)