自己的电脑做网站空间视屏,大企业网站制作及维护,移动端网站,个人网站代做需求#xff1a;
在一个页面下有多个子tab在某些tab 下#xff0c;或者父节点的数据更新的时候#xff0c;其他子tab 或者父节点也要同步更新
进程#xff1a;
正常情况下会把所有用到的数据都移动到父节点#xff0c;修改行为也都放在父节点但如果这样的话父节点的数据…需求
在一个页面下有多个子tab在某些tab 下或者父节点的数据更新的时候其他子tab 或者父节点也要同步更新
进程
正常情况下会把所有用到的数据都移动到父节点修改行为也都放在父节点但如果这样的话父节点的数据会非常的多而且有可能只是某两个子节点的数据需要更新这就很麻烦换一个思路所有的数据都放在各自子节点但是在某个变化发生的时候触发一下更新逻辑那又回到之前的那个问题了需要每一个子节点都传入对应的触发函数再换一个逻辑增加一个全局的hook 并绑定上对应的事件在你想要触发更新的时候调用一下这个hook 行为如果有绑定的事件的话就会触发对应事件
//eventhook
type eventName string | Symbolconst eventMap new MapeventName, ArrayFunction()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] )这个做法的好处是就不需要往子组建传一堆东西了而且也做到了更好的解耦
拓展
在使用这个方法的时候需要一个全局唯一的名字所以用到了 SymbolSymbol是一个绝对唯一的常亮极端的例子 Symbol(“test”) ! Symbol(“test”)
