React Hook闭包陷阱如何避免，才能确保长尾词函数状态更新不受影响？

本文共计1792个文字，预计阅读时间需要8分钟。

目录正文useEvent的实现与开源Hooks的差异总结正文我们知道，Hooks 是 React 16.8 引入的新特性，它允许我们在函数组件中使用类组件中的 state 和其他 React 特性。其中，useEvent 是一个自定义 Hook，用于创建可重用的、响应式的事件处理器。

useEvent的实现useEvent 的实现非常简单，它接收一个事件处理器函数作为参数，并返回一个新的函数，这个新函数可以安全地被绑定到事件监听器上。

javascriptfunction useEvent(handler) { return useCallback((event)=> { handler(event); }, [handler]);}

与开源Hooks的差异与开源的 Hooks 相比，useEvent 更专注于事件处理，而开源 Hooks 则更通用，可以用于状态管理、生命周期等。

总结useEvent 是一个非常有用的自定义 Hook，它可以帮助我们更好地管理事件处理器，避免闭包陷阱等问题。

正文我们知道，Hooks 是 React 16.8 引入的新特性，它允许我们在函数组件中使用类组件中的 state 和其他 React 特性。其中，useEvent 是一个自定义 Hook，用于创建可重用的、响应式的事件处理器。

Hooks 使用时存在的问题Hooks 使用时存在所谓的闭包陷阱，即当组件重新渲染时，闭包中捕获的变量（如 state）可能不是最新的值。

代码示例：javascriptfunction Chat() { const [text, setText]=useState('');

const onClick=useEvent((event)=> { setText(event.target.value); });

return ;}

以上代码中，当用户输入文本时，由于闭包陷阱，setText 可能不会接收到最新的输入值。

目录

• 正文
• useEvent
• useEvent的实现
• 与开源Hooks的差异
• 总结

正文

我们知道，Hooks使用时存在所谓的闭包陷阱，考虑如下代码：

function Chat() { const [text, setText] = useState(''); const onClick = useCallback(() => { sendMessage(text); }, []); return <SendButton onClick={onClick} />; }

我们期望点击后sendMessage能传递text的最新值。

然而实际上，由于回调函数被useCallback缓存，形成闭包，所以点击的效果始终是sendMessage('')。

这就是闭包陷阱。

以上代码的一种解决方式是为useCallback增加依赖项：

const onClick = useCallback(() =&gt; { sendMessage(text); }, [text]);

但是这么做了后，每当依赖项（text）变化，useCallback会返回一个全新的onClick引用，这就失去了useCallback缓存函数引用的作用。

闭包陷阱的出现，加大了Hooks的上手门槛，也让开发者更容易写出有bug的代码。

现在，React官方团队要出手解决这个问题。

useEvent

解决方式是引入一个新的原生Hook——useEvent。

他用于定义一个函数，这个函数有2个特性：

• 在组件多次render时保持引用一致
• 函数内始终能获取到最新的props与state

上面的例子使用useEvent改造后：

function Chat() { const [text, setText] = useState(''); const onClick = useEvent(() => { sendMessage(text); }); return <SendButton onClick={onClick} />; }

在Chat组件多次render时，onClick始终指向同一个引用。

并且onClick触发时始终能获取到text的最新值。

之所以叫useEvent，是因为React团队认为这个Hook的主要应用场景是：封装事件处理函数。

useEvent的实现

useEvent的实现并不困难，代码类似如下：

function useEvent(handler) { const handlerRef = useRef(null); // 视图渲染完成后更新`handlerRef.current`指向 useLayoutEffect(() => { handlerRef.current = handler; }); // 用useCallback包裹，使得render时返回的函数引用一致 return useCallback((...args) => { const fn = handlerRef.current; return fn(...args); }, []); }

整体包括两部分：

• 返回一个没有依赖项的useCallback，使得每次render时函数的引用一致

useCallback((...args) => { const fn = handlerRef.current; return fn(...args); }, []);

• 在合适的时机更新handlerRef.current，使得实际执行的函数始终是最新的引用

与开源Hooks的差异

很多开源Hooks库已经实现类似功能（比如ahooks中的useMemoizedFn）

useEvent与这些开源实现的差异主要体现在：

useEvent定位于处理事件回调函数这一单一场景，而useMemoizedFn定位于缓存各种函数。

那么问题来了，既然功能类似，那useEvent为什么要限制自己的使用场景呢？

答案是：为了更稳定。

useEvent能否获取到最新的state与props取决于handlerRef.current更新的时机。

在上面模拟实现中，useEvent更新handlerRef.current的逻辑放在useLayoutEffect回调中进行。

这就保证了handlerRef.current始终在视图完成渲染后再更新：

useLayoutEffect(() =&gt; { handlerRef.current = handler; });

而事件回调触发的时机显然在视图完成渲染之后，所以能够稳定获取到最新的state与props。

注：源码内的实际更新时机会更早些，但不影响这里的结论

再来看看ahooks中的useMemoizedFn，fnRef.current的更新时机是useMemoizedFn执行时（即组件render时）：

function useMemoizedFn<T extends noop>(fn: T) { const fnRef = useRef<T>(fn); // 更新fnRef.current fnRef.current = useMemo(() => fn, [fn]); // ...省略代码 }

当React18启用并发更新后，组件render的次数、时机并不确定。

所以useMemoizedFn中fnRef.current的更新时机也是不确定的。

这就增加了在并发更新下使用时潜在的风险。

可以说，useEvent通过限制handlerRef.current更新时机，进而限制应用场景，最终达到稳定的目的。

总结

useEvent当前还处于RFC（Request For Comments）阶段。

很多热心的开发者对这个Hook的命名提出了建议，比如：useStableCallback：

又比如：useLatestClosure：

从这些命名看，他们显然扩大了useEvent的应用场景。

经过本文的分析我们知道，扩大应用场景意味着增加开发者使用时出错的风险，更多关于React Hook闭包陷阱完善的资料请关注易盾网络其它相关文章！