这是react的useEffectEvent的准确polyfill吗？

Question

这是 React 即将推出的 useEffectEvent 钩子的准确填充吗？它是否存在任何潜在问题？

我不确定的一部分是，在返回的函数用于任何其他效果之前是否保证已更新引用。我想我在这方面没问题，只要我从不在代码中的其他任何地方使用相当深奥的 useInsertionEffect ，但我想确认一下。

function useEffectEvent(callback) {
  const fnRef = useRef(null)
  useInsertionEffect(() => {
    fnRef.current = callback
  }) 
  return (...args) => {
    return fnRef.current.apply(null, args)
  }
}

Answer 1

我不认为 React 团队已经为 useEffectEvent 提出了官方的 polyfill（至少我还没有看到）。

话虽如此，您可以在针对现已失效的 useEvent 的 RFC，最初使用 useLayoutEffect。在将事件与效果分离的早期版本中，Dan Abramov 展示了更新的版本看起来像这样（在文档中不再可见）：

import { useRef, useInsertionEffect, useCallback } from 'react';

// The useEvent API has not yet been added to React,
// so this is a temporary shim to make this sandbox work.
// You're not expected to write code like this yourself.

export function useEvent(fn) {
  const ref = useRef(null);
  useInsertionEffect(() => {
    ref.current = fn;
  }, [fn]);
  return useCallback((...args) => {
    const f = ref.current;
    return f(...args);
  }, []);
}

这个polyfill使用useInsertionEffect。我相信这种选择的原因是插入效果是最先运行的 （与 useLayoutEffect 和 useEffect 相比）。因此，可以非常安全地假设在任何其他效果运行之前更新了引用。

后来，useEvent 的 RFC 是搁置和useEffectEvent开始在文档中显示 。尽管如此，由于公开的行为是相同的，因此可以重用相同的polyfill来实现useEffectEvent。

请注意，使用这个polyfill，钩子会返回一个稳定的函数（感谢useCallback(..., [])），这可能不是必需的，但更简单（以防万一）消费者错误地将返回的函数添加到效果的依赖项中）。

我想了解有关polyfill的更多信息，我已经在博客中介绍过它：查看新 React 文档中的 useEvent polyfill。