Cas d'utilisation du hook React `useInsertionEffect`

Introduction

Tous ceux qui connaissent le hook useEffect, parfois useLayoutEffect est plus approprié.

Peu de gens ont déjà utilisé useInsertionEffect, explorons-le.

L'API pour hook est très similaire à useEffect, vous devez ajouter du code dans la fonction de configuration, le tableau des dépendances et elle peut renvoyer une fonction de nettoyage.

Les documents React donnent cette description.

useInsertionEffect est destiné aux auteurs de bibliothèques CSS-in-JS.

Cela peut être utile à d'autres fins, principalement pour exécuter du code une fois lors du montage du composant, par ex. ajouter un écouteur d'événement à une fenêtre.

Cas d'utilisation

Surligneur de code Shiki

  React.useInsertionEffect(() => {
    initShiki().then((highlight) => {
      setHtml(highlight(content));
    });
  }, [content]);

Écouteurs d'événements pour la fenêtre

  useInsertionEffect(() => {
    const popCb = () => {
      const newVal = parse(filterUnknownParamsClient(defaultState));
      state.current = newVal
    };

    window.addEventListener(popstateEv, popCb);

    return () => {
      window.removeEventListener(popstateEv, popCb);
    };
  }, []);

Quelques abonnements personnalisés

  useInsertionEffect(() => {
    const cb = () => {
      _setState(stateMap.get(stateShape.current) || stateShape.current);
    };
    const unsub = subscribers.add(stateShape.current, cb);

    return () => {
      unsub();
    };
  }, []);

Avantages et inconvénients

• Le principal avantage de ce hook est d'exécuter le code avant le rendu du composant et avant les autres hooks.
• Vous n'êtes pas censé utiliser useState.setState depuis ce hook, mais c'est du travail, peut-être que cela changera dans le futur.
• Les références ne sont pas attachées au moment de l'exécution du crochet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!