React useIsomporphicEffect-Hook

Einführung

In diesem Lab werden wir die Verwendung des useIsomorphicEffect-Hooks in React untersuchen. Dieser Hook ermöglicht die Ausführung von useEffect() auf dem Server und useLayoutEffect() auf dem Client, was gewährleistet, dass der gleiche Effekt unabhängig von der Umgebung ausgeführt wird. Durch dieses Lab lernen wir, wie wir den useIsomorphicEffect-Hook verwenden, um konsistente und zuverlässige Effekte in unseren React-Anwendungen zu erstellen.

React useIsomporphicEffect-Hook

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Um die richtige Verwendung von useEffect() auf dem Server und useLayoutEffect() auf dem Client sicherzustellen, können Sie typeof verwenden, um zu überprüfen, ob das Window-Objekt definiert ist. Wenn ja, geben Sie useLayoutEffect() zurück, andernfalls useEffect(). Hier ist ein Beispiel dafür, wie dies implementiert werden kann:

const useIsomorphicEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

Dann können Sie in Ihrem Code useIsomorphicEffect() wie in diesem Beispiel verwenden:

const MyApp = () => {
  useIsomorphicEffect(() => {
    window.console.log("Hello");
  }, []);

  return null;
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

Dies wird 'Hello' in der Konsole ausgeben, wenn die Komponente gemountet wird, und funktioniert sowohl auf dem Server als auch auf dem Client korrekt.

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite zu previewen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das React useIsomporphicEffect-Hook-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.