Ist dies eine genaue Polyfüllung für das useEffectEvent von React?

Question

Ist das eine genaue Unterlage für die kommenden useEffectEvent Hooks von React? Gibt es mögliche Probleme damit?

Ich bin mir nicht sicher, ob die Referenz garantiert aktualisiert wird, bevor die zurückgegebene Funktion für einen anderen Effekt verwendet wird. Ich denke, ich bin damit einverstanden, solange ich das eher esoterische useInsertionEffect nirgendwo sonst in meinem Code verwende, aber ich wollte es bestätigen.

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。