Est-ce un polyfill précis pour useEffectEvent de React ?

Question

Est-ce une cale précise pour les prochains hooks useEffectEvent de React ? Y a-t-il des problèmes potentiels avec cela ?

La partie dont je ne suis pas sûr est de savoir si la référence est garantie d'être mise à jour avant que la fonction renvoyée ne soit utilisée pour tout autre effet. Je pense que ça me va tant que je n'utilise jamais le plutôt ésotérique useInsertionEffect ailleurs dans mon code, mais je voulais confirmer.

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

Answer 1

Je ne pense pas que l'équipe React ait proposé un polyfill officiel pour useEffectEvent (du moins je ne l'ai pas encore vu).

Cela dit, vous pouvez cibler le , aujourd'hui disparu, à useEvent 的 RFC，最初使用 useLayoutEffect. Dans une première version de Séparer les événements des effets, Dan Abramov a montré qu'une version mise à jour ressemblait à ceci (qui n'est plus visible dans la documentation) :

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);
  }, []);
}

Ce polyfill utilise useInsertionEffect。我相信这种选择的原因是插入效果是最先运行的 （与 useLayoutEffect 和 useEffect par rapport à). Par conséquent, il est très prudent de supposer que la référence est mise à jour avant l’exécution de tout autre effet.

Plus tard, la RFC pour useEvent a été abandonnée useEvent 的 RFC 是搁置和useEffectEvent开始在文档中显示 。尽管如此，由于公开的行为是相同的，因此可以重用相同的polyfill来实现useEffectEvent et

Démarrez l'afficher dans la documentation

. Néanmoins, puisque le comportement exposé est le même, le même polyfill peut être réutilisé pour l'implémentation useCallback(..., []).

Veuillez noter qu'avec ce polyfill, le hook renvoie une fonction stable (merci ), ce qui n'est peut-être pas nécessaire mais est plus simple (juste au cas où le consommateur ajoute par erreur la fonction renvoyée aux dépendances de l'effet).

Je veux en savoir plus sur les polyfills, j'ai déjà blogué à ce sujet : 🎜Découvrez le polyfill useEvent🎜 dans la nouvelle documentation React. 🎜