EventEmitter在react中的应用实例

最近用EventEmitter解决了react中一个全局状态管理的问题

首先我们提出一个需求：

1.我希望写一个工具类Gobal，这个类中可以保存一些全局数据state和方法供其他组件直接调用

2.光是调用还不行，我还得在其他组件中能修改这个工具类Gobal里面的数据state

3.如果只是修改这个类的静态数据的话，那么这些数据是无法触发react的自动渲染的，即无法实时修改到某个组件state或者是props

这个时候就可以用到EventEmitter这个npm包了，EventEmitter会提供一个类，这个类上的this会有emit和on方法，其他on可以完全实时监听到emit发出的请求

比如对于下面这个工具类：

class Gobal extends EventEmitter {
  state: any;
  constructor() {
    super();
    this.state = {
      A: 1,
      B: 2,
      C: 3
    }
  }
  setA(data: number) {
    this.state.a = data
    this.emit('AChange', this.state.A);
  }
}
export default new Gobal;

我们定义了state有ABC三个变量，定义了一个setA函数，这个函数会把传进来的值赋给state中的A,并会广播emit一个‘AChange’

这个时候我们在其他组件：

import Gobal from '@/component/newWebsocket'
const IndexPage = (props: any) => {
  //进页面就触发
  useEffect(() => {
    Gobal.on('AChange', (data) => {
      console.log(data)
    })//监听AChange
    Gobal.setA(100)
    console.log(Gobal.state)
  }, []);

会打印出下面这个内容

 我们可以看出

1.Gobal.on（‘xxx’,(data)=>{}）这个监听函数尽量在页面加载的时候就定义，对于函数式组件，可以写在useEffect里面，对于class组件，可以写在componentWillMount里面

2.监听事件是实时触发的，不会因为我的Gobal.setA在Gobal.on下面，而监听不到

3.既然监听是实时的，我们直接在on中写该组件的setstate,不光可以把Gobal的数据保存到state中，而且在之后其他组件调用Gobal工具类里面的setA函数，我其他组件也可以实时监听到并获取最新的数据

既然都实时获得最新数据了，那么在函数下面写自己组件的setstate并实时渲染也就水到渠成

备注：这种状态管理可以和前端websocket搭配使用，这个Gobal类可以连接一个websocket并处理websocket的send和onmessage，将这些数据实时广播给所有组件