如何使用useRef避免useEffect因回调闭包变化重复订阅？

你提到的场景很常见——当用useEffect包裹高开销的订阅逻辑时，回调闭包的变化会触发重复的on/off操作，确实会造成不必要的性能损耗。你的useRef思路方向是对的，但现有写法存在两处问题，我来给你梳理正确的实现方式：

原写法的问题 #

你最初的代码中，useEffect依赖了cb，所以每次fn、foo等依赖项变化导致cb更新时，都会触发重新订阅（先执行off再执行on），这正是你想避免的情况。

你的useRef写法的问题 #

你想用useRef保存回调的思路没问题，但：

1. 没必要把ref放进useEffect的依赖数组——useRef返回的引用对象在组件整个生命周期里都是同一个，不会变化，加进去不会触发useEffect重新执行，属于多余操作。
2. 没有同步更新ref.current的值——当cb更新时，ref.current还是旧的回调，会导致订阅触发时执行的是过时的逻辑。

正确的实现代码 #

// 用useCallback定义带依赖的回调
const cb = useCallback(() => {
  fn(foo, bar, baz);
}, [fn, foo, bar, baz]);

// 用ref保存最新的回调引用
const cbRef = useRef(cb);

// 同步更新ref：每次cb变化时，把最新的回调存入ref
useEffect(() => {
  cbRef.current = cb;
}, [cb]);

// 订阅逻辑：仅当events变化时才重新订阅
useEffect(() => {
  // 定义订阅的处理函数，始终调用ref里的最新回调
  const handleEvent = () => {
    cbRef.current();
  };

  events.on("the-event", handleEvent);
  // 清理函数必须用同一个handleEvent引用，确保能正确移除订阅
  return () => {
    events.off("the-event", handleEvent);
  };
}, [events]);

为什么这样写能解决问题 #

• cbRef.current会始终保持最新的cb回调：只要cb因依赖项更新，同步用的useEffect就会立刻把新回调存入ref。
• 订阅逻辑只会在events变化时重新执行：避免了因回调闭包更新导致的重复订阅，彻底减少高开销的on/off操作。
• 注意handleEvent要定义在订阅的useEffect内部：确保订阅和取消订阅用的是同一个函数引用（大部分事件库都是按函数引用匹配来移除监听的，用同一个引用才能保证清理生效）。

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