react 实现监听逻辑

需求:

  • 在一个页面下有多个子tab
  • 在某些tab 下,或者父节点的数据更新的时候,其他子tab 或者父节点也要同步更新

进程:

  • 正常情况下会把所有用到的数据都移动到父节点,修改行为也都放在父节点
  • 但如果这样的话父节点的数据会非常的多,而且有可能只是某两个子节点的数据需要更新,这就很麻烦
  • 换一个思路,所有的数据都放在各自子节点但是,在某个变化发生的时候,触发一下更新逻辑
  • 那又回到之前的那个问题了,需要每一个子节点都传入对应的触发函数
  • 再换一个逻辑,增加一个全局的hook 并绑定上对应的事件,在你想要触发更新的时候调用一下这个hook 行为,如果有绑定的事件的话,就会触发对应事件
typescript 复制代码
//eventhook
type eventName = string | Symbol

const 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)
  • 在需要被监听的地方在初始化的时候加入对应的监听逻辑
typescript 复制代码
useEffect(() => addListener(() => actionRef.current?.reload()), [])
  • 在需要触发这个监听逻辑的地方加入const { triggerEvent } = useEvent(UPDATEUSERDATAEVENTNAME)
  • 并触发这个监听
typescript 复制代码
useEffect(() => {
    triggerEvent()
  }, [userId] )
  • 这个做法的好处是就不需要往子组建传一堆东西了,而且也做到了更好的解耦

拓展

  • 在使用这个方法的时候需要一个全局唯一的名字所以用到了 Symbol
  • Symbol是一个绝对唯一的常亮,极端的例子 Symbol("test") != Symbol("test")
相关推荐
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js