不使用useEvent时，如何向自定义Hook传递事件处理函数？

针对你提到的场景——避免因事件处理函数变化导致自定义Hook频繁触发聊天重连，目前通用的解决方案不止是单独用useCallback，得结合自定义Hook的设计来配合，下面是几种常用方案：

1. useCallback + 自定义Hook合理处理依赖 #

如果你的事件处理函数依赖的变量不频繁变化，或者变化时确实需要重连，可以用useCallback稳定函数引用：

// 组件内部
const onReceiveMessage = useCallback((message) => {
  console.log('收到消息:', message);
  // 这里如果有依赖，比如组件内的state/props，必须加到依赖数组里
}, [/* 依赖项，比如username、chatId等 */]);

// 自定义Hook
function useChatConnection(onReceiveMessage) {
  useEffect(() => {
    const connection = connectToChat();
    connection.on('message', onReceiveMessage);
    return () => connection.disconnect();
  }, [onReceiveMessage]); // 现在因为useCallback稳定了引用，只有依赖变化时才会重连
}

注意：如果事件函数依赖的变量频繁变化，useCallback的引用还是会更新，还是会触发重连，这时候这个方案就不太适用。

2. 自定义Hook内部维护订阅机制 #

让自定义Hook暴露一个订阅方法，组件主动注册事件处理函数，而不是把函数作为Hook的参数传入。这样自定义Hook可以内部管理订阅列表，不会因为函数引用变化就销毁重建连接：

// 自定义Hook
function useChatConnection() {
  const subscribers = useRef(new Set());
  
  useEffect(() => {
    const connection = connectToChat();
    connection.on('message', (message) => {
      // 触发所有订阅的处理函数
      subscribers.current.forEach(callback => callback(message));
    });
    return () => connection.disconnect();
  }, []); // 这里没有依赖，只会初始化一次连接

  // 暴露订阅/取消订阅方法
  const subscribe = useCallback((callback) => {
    subscribers.current.add(callback);
    return () => subscribers.current.delete(callback);
  }, []);

  return { subscribe };
}

// 组件内部
function ChatComponent() {
  const { subscribe } = useChatConnection();
  
  useEffect(() => {
    const unsubscribe = subscribe((message) => {
      console.log('收到消息:', message);
      // 这里可以直接用组件内的最新state/props，不用怕闭包问题
    });
    return unsubscribe;
  }, [subscribe]); // subscribe是稳定的，所以只会注册一次
}

3. 用useRef保存最新的事件处理函数（替代弃用的useEvent） #

这是最接近原useEvent意图的方案：在自定义Hook里用ref存储最新的事件处理函数，这样不管组件里的函数怎么变，Hook内部总能拿到最新值，同时不会把函数作为useEffect的依赖，避免重连：

// 自定义Hook
function useChatConnection(onReceiveMessage) {
  const latestOnReceive = useRef(onReceiveMessage);
  
  // 每次组件重渲染，更新ref的current到最新的函数
  useEffect(() => {
    latestOnReceive.current = onReceiveMessage;
  }, [onReceiveMessage]);

  useEffect(() => {
    const connection = connectToChat();
    connection.on('message', (message) => {
      // 调用最新的处理函数
      latestOnReceive.current(message);
    });
    return () => connection.disconnect();
  }, []); // 这里没有依赖，只会初始化一次连接
}

// 组件内部不用额外包装（当然用useCallback也能减少ref的更新次数，不是必须）
function ChatComponent() {
  const onReceiveMessage = (message) => {
    console.log('收到消息:', message);
    // 可以直接用组件内的最新state
  };

  useChatConnection(onReceiveMessage);
}

总结一下：如果事件函数依赖少且变化不频繁，useCallback足够；如果依赖频繁变化或者需要避免任何不必要的重连，用useRef保存最新函数的方案更可靠；订阅机制则适合多个组件或多处需要监听的场景。

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