這是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。