Heim > Web-Frontend > js-Tutorial > Anwendungsfälle für den React-Hook „useInsertionEffect'.

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

WBOY
Freigeben: 2024-08-22 19:14:06
Original
586 Leute haben es durchsucht

Use cases for `useInsertionEffect` React hook

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]);
Nach dem Login kopieren

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);
    };
  }, []);
Nach dem Login kopieren

Einige benutzerdefinierte Abonnements

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

    return () => {
      unsub();
    };
  }, []);
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage