大家好，我卡颂。

咱们晓得，Hooks应用时存在所谓的闭包陷阱，思考如下代码：

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

咱们冀望点击后sendMessage能传递text的最新值。

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

这就是闭包陷阱。

以上代码的一种解决形式是为useCallback减少依赖项：

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

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

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

当初，React官网团队要出手解决这个问题。

欢送退出人类高质量前端框架群，带飞

useEvent

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

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

  1. 在组件屡次render时放弃援用统一
  2. 函数内始终能获取到最新的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);  }, []);}

整体包含两局部：

  1. 返回一个没有依赖项的useCallback，使得每次render时函数的援用统一
useCallback((...args) => {  const fn = handlerRef.current;  return fn(...args);}, []);
  1. 在适合的机会更新handlerRef.current，使得理论执行的函数始终是最新的援用

与开源Hooks的差别

很多开源Hooks库曾经实现相似性能（比方ahooks中的useMemoizedFn）

useEvent与这些开源实现的差别次要体现在：

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

那么问题来了，既然性能相似，那useEvent为什么要限度本人的应用场景呢？

答案是：为了更稳固。

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

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

这就保障了handlerRef.current始终在视图实现渲染后再更新：

useLayoutEffect(() => {  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的利用场景。

通过本文的剖析咱们晓得，扩充利用场景意味着减少开发者应用时出错的危险。