React如何在符合Hooks规则前提下批量绑定事件监听？

核心要解决两个矛盾：既要遵守Hooks 调用顺序、调用次数固定的规则，又要避免不必要的事件解绑/重绑定产生冗余网络请求，实现思路如下：

• 把所有需要绑定的事件和对应prop的映射关系，提前定义为组件外部的固定常量，保证每次渲染时Hooks的调用数量、顺序完全一致，从根源符合Hooks规则
• 用ref存储最新的事件回调，把回调引用变化和事件绑定生命周期解耦，回调更新时不需要触发任何解绑/重绑定逻辑，最大程度减少网络请求

具体实现代码 #

首先在组件外部定义固定的事件配置，这个配置一旦定义就不会修改，遍历顺序、长度永远固定：

// 组件作用域外定义，固定所有需要代理的事件和对应prop名
const EVENT_CONFIG = [
  { eventName: 'event1', propName: 'onEvent1' },
  { eventName: 'event2', propName: 'onEvent2' },
  { eventName: 'event3', propName: 'onEvent3' },
  // 依次补充所有需要处理的事件，直到event20
  { eventName: 'event20', propName: 'onEvent20' },
]

组件内部的实现逻辑：

function ProxyComponent(props) {
  // 为每个事件初始化一个ref，用来存储最新的回调
  // 因为EVENT_CONFIG是固定常量，这里useRef的调用顺序、数量永远不变
  const handlerRefMap = EVENT_CONFIG.reduce((acc, { propName }) => {
    acc[propName] = useRef(props[propName] ?? null)
    return acc
  }, {})

  // 每次渲染把最新的回调同步到对应的ref上，这个过程不会触发任何事件绑定逻辑
  EVENT_CONFIG.forEach(({ propName }) => {
    handlerRefMap[propName].current = props[propName] ?? null
  })

  // 遍历固定配置为每个事件绑定独立的useEffect
  // 同样因为EVENT_CONFIG固定，useEffect的调用顺序、数量永远不变，完全符合Hooks规则
  EVENT_CONFIG.forEach(({ eventName, propName }) => {
    useEffect(() => {
      // 绑定到事件系统的是固定的包装函数，永远从ref取最新的回调执行
      const wrappedHandler = (...args) => {
        handlerRefMap[propName].current?.(...args)
      }

      if (someObject && handlerRefMap[propName].current) {
        someObject.on(eventName, wrappedHandler)
      }

      return () => {
        if (someObject && handlerRefMap[propName].current) {
          someObject.off(eventName, wrappedHandler)
        }
      }
      // 依赖数组只需要放someObject，只有当代理的目标对象本身变化时，才需要重绑所有事件
    }, [someObject])
  })

  return null
}

方案满足的约束说明 #

• 完全符合Hooks规则：所有useRef、useEffect的调用次数、调用顺序在每次渲染时100%固定，不存在动态增减、顺序错乱的可能，不会触发Hooks规则校验错误。之前组件内循环调用useEffect的写法违规，本质是React无法保证组件内生成的events对象遍历次数、顺序永远固定，存在状态错乱风险，把配置提到组件外就彻底解决了这个问题。
• 最小化网络请求：事件绑定逻辑的触发时机只有两个：组件首次挂载、someObject实例本身变化。所有事件回调props的更新只会同步到ref中，不会触发任何on/off调用，哪怕单个事件的回调变化，也不会导致其他事件重绑，完全没有冗余网络请求。
• 不存在依赖追踪问题：不需要把20多个回调都放到useEffect的依赖数组里，ref天然可以拿到最新的回调值，不会出现闭包引用旧回调的问题。

内容的提问来源于stack exchange，提问作者Nirav