Adakah ini polyfill yang tepat untuk useEffectEvent react?

Question

Adakah ini shim yang tepat untuk cangkuk useEffectEvent React yang akan datang? Adakah terdapat sebarang masalah yang berpotensi dengannya?

Bahagian yang saya tidak pasti ialah sama ada rujukan itu dijamin dikemas kini sebelum fungsi yang dikembalikan digunakan untuk sebarang kesan lain. Saya rasa saya baik dengan ini selagi saya tidak pernah menggunakan yang agak esoterik useInsertionEffect di tempat lain dalam kod saya, tetapi saya ingin mengesahkan.

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

Answer 1

Saya tidak fikir pasukan React telah mencadangkan poliisi rasmi untuk useEffectEvent (sekurang-kurangnya saya belum melihatnya lagi).

Setelah berkata demikian, anda boleh menyasarkan yang kini tidak berfungsi di useEvent 的 RFC，最初使用 useLayoutEffect. Dalam versi awal Memisahkan acara daripada kesan, Dan Abramov menunjukkan bahawa versi yang dikemas kini kelihatan seperti ini (tidak lagi kelihatan dalam dokumentasi):

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 ini menggunakan useInsertionEffect。我相信这种选择的原因是插入效果是最先运行的 （与 useLayoutEffect 和 useEffect berbanding). Oleh itu, adalah sangat selamat untuk menganggap bahawa rujukan dikemas kini sebelum sebarang kesan lain dijalankan.

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

Mulakan tunjukkan dalam dokumentasi

. Namun begitu, memandangkan tingkah laku yang terdedah adalah sama, polyfill yang sama boleh digunakan semula untuk pelaksanaan useCallback(..., []).

Sila ambil perhatian bahawa dengan polyfill ini, cangkuk mengembalikan fungsi yang stabil (terima kasih ), yang mungkin tidak diperlukan tetapi lebih mudah (untuk berjaga-jaga) pengguna tersilap menambah fungsi yang dikembalikan kepada kebergantungan kesan ).

Saya ingin mengetahui lebih lanjut tentang polyfill, saya telah menulis blog tentangnya: 🎜Lihat useEvent polyfill🎜 dalam dokumentasi React baharu. 🎜