react 实现监听逻辑
需求：
- 在一个页面下有多个子tab
- 在某些tab 下，或者父节点的数据更新的时候，其他子tab 或者父节点也要同步更新
进程：
- 正常情况下会把所有用到的数据都移动到父节点，修改行为也都放在父节点
- 但如果这样的话父节点的数据会非常的多，而且有可能只是某两个子节点的数据需要更新，这就很麻烦
- 换一个思路，所有的数据都放在各自子节点但是，在某个变化发生的时候，触发一下更新逻辑
- 那又回到之前的那个问题了，需要每一个子节点都传入对应的触发函数
- 再换一个逻辑，增加一个全局的hook 并绑定上对应的事件，在你想要触发更新的时候调用一下这个hook 行为，如果有绑定的事件的话，就会触发对应事件
//eventhook
type eventName = string | Symbolconst eventMap = new Map<eventName, Array<Function>>()const addListenerByName = (name: eventName, func: Function) => {if (typeof func !== 'function') {return ;}const listeners = eventMap.get(name) || []if (!listeners.includes(func)) {eventMap.set(name, [...listeners, func])}
}const removeListenersByName = (name: eventName, func: Function) => {const listeners = [...(eventMap.get(name) || [])]eventMap.set(name, listeners.filter(f => f !== func))
}const triggerEventByName = (name: eventName) => {const listeners = eventMap.get(name) || []listeners.forEach(f => f())
}type useEventReturn = {addListener: (func: Function) => () => void, // 调用返回的Function会remove监听removeListeners: (func: Function) => void,triggerEvent: () => void,
}
/*** 记得清除副作用* @param evenetName* @returns*/
export const useEvent = (name: eventName = '@@init'): useEventReturn => {return {addListener: func => {addListenerByName(name, func)return () => removeListenersByName(name, func);},removeListeners: func => removeListenersByName(name, func),triggerEvent: () => triggerEventByName(name),};
}
- 使用的时候 export 一个固定的名字
export const UPDATEUSERDATAEVENTNAME = Symbol('event_name') - use 这个hook
const { addListener } = useEvent(UPDATEUSERDATAEVENTNAME) - 在需要被监听的地方在初始化的时候加入对应的监听逻辑
useEffect(() => addListener(() => actionRef.current?.reload()), [])
- 在需要触发这个监听逻辑的地方加入
const { triggerEvent } = useEvent(UPDATEUSERDATAEVENTNAME) - 并触发这个监听
useEffect(() => {triggerEvent()}, [userId] )
- 这个做法的好处是就不需要往子组建传一堆东西了，而且也做到了更好的解耦
拓展
- 在使用这个方法的时候需要一个全局唯一的名字所以用到了 Symbol
- Symbol是一个绝对唯一的常亮，极端的例子 Symbol(“test”) != Symbol(“test”)