Anwendungsfälle für den React-Hook „useInsertionEffect“.

Einführung

Jeder kennt den useEffect-Hook, manchmal ist useLayoutEffect besser geeignet.

Nicht so viele Leute haben jemals useInsertionEffect verwendet, lassen Sie es uns erkunden.

API für Hook ist useEffect sehr ähnlich, muss der Setup-Funktion und dem Abhängigkeitsarray Code hinzugefügt werden und kann eine Bereinigungsfunktion zurückgeben.

React-Dokumente enthalten diese Beschreibung.

useInsertionEffect ist für Autoren von CSS-in-JS-Bibliotheken gedacht.

Es kann für andere Zwecke nützlich sein, hauptsächlich um Code einmal beim Komponenten-Mount auszuführen, z.B. Fügen Sie einem Fenster einen Ereignis-Listener hinzu.

Anwendungsfälle

Shiki-Code-Textmarker

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

Ereignis-Listener für Fenster

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

    window.addEventListener(popstateEv, popCb);

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

Einige benutzerdefinierte Abonnements

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

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

Für und Wider

• Der Hauptvorteil dieses Hooks besteht darin, dass Code ausgeführt wird, bevor die Komponente gerendert wird und vor anderen Hooks.
• Sie sollten useState.setState nicht innerhalb dieses Hooks verwenden, aber es ist Arbeit, vielleicht wird es sich in Zukunft ändern.
• Refs werden beim Time-Hook-Lauf nicht angehängt.

Das obige ist der detaillierte Inhalt vonAnwendungsfälle für den React-Hook „useInsertionEffect“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!