最近用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,将这些数据实时广播给所有组件