关于javascript:React官方团队出手补齐原生Hook短板

大家好，我卡颂。

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

function Chat() {const  = useState('');

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

  return <SendButton onClick={onClick} />;
}

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

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

这就是 闭包陷阱。

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

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

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

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

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

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

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

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

在组件屡次 render 时放弃援用统一
函数内始终能获取到最新的 props 与state

下面的例子应用 useEvent 革新后：

function Chat() {const  = useState('');

  const onClick = useEvent(() => {sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}

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

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

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

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 库曾经实现相似性能（比方 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 的利用场景。

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

关于javascript:React官方团队出手补齐原生Hook短板

useEvent

useEvent 的实现

与开源 Hooks 的差别

总结