React useSSR-Hook

ReactReactBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir die Verwendung des useSSR-Hooks in React erkunden. Dieser Hook ermöglicht es uns, zu überprüfen, ob unser Code im Browser oder auf dem Server ausgeführt wird, und liefert zusätzliche Informationen über die Umgebung, wie die Verfügbarkeit von Arbeitern, Event-Listener und Viewport. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie man React-Code schreibt, der für verschiedene Umgebungen optimiert ist.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react(("React")) -.-> react/PerformanceOptimizationGroup(["Performance Optimization"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/conditional_render("Conditional Rendering") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") react/PerformanceOptimizationGroup -.-> react/memoization("Memoization with useMemo") subgraph Lab Skills react/jsx -.-> lab-38410{{"React useSSR-Hook"}} react/conditional_render -.-> lab-38410{{"React useSSR-Hook"}} react/hooks -.-> lab-38410{{"React useSSR-Hook"}} react/use_state_reducer -.-> lab-38410{{"React useSSR-Hook"}} react/memoization -.-> lab-38410{{"React useSSR-Hook"}} end

React useSSR-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 zu überprüfen, ob der Code im Browser oder auf dem Server ausgeführt wird, erstellen Sie einen benutzerdefinierten Hook, der typeof, Window, Window.document und Document.createElement() verwendet, um zu bestimmen, ob das DOM verfügbar ist. Verwenden Sie den useState()-Hook, um die inBrowser-Zustandsvariable zu definieren, und den useEffect()-Hook, um sie zu aktualisieren und am Ende aufzuräumen. Verwenden Sie den useMemo()-Hook, um die Rückgabewerte des benutzerdefinierten Hooks zu memoisiert.

Hier ist der Code:

const isDOMavailable = !!(
  typeof window !== "undefined" &&
  window.document &&
  window.document.createElement
);

const useSSR = () => {
  const [inBrowser, setInBrowser] = React.useState(isDOMavailable);

  React.useEffect(() => {
    setInBrowser(isDOMavailable);
    return () => {
      setInBrowser(false);
    };
  }, []);

  const useSSRObject = React.useMemo(
    () => ({
      isBrowser: inBrowser,
      isServer: !inBrowser,
      canUseWorkers: typeof Worker !== "undefined",
      canUseEventListeners: inBrowser && !!window.addEventListener,
      canUseViewport: inBrowser && !!window.screen
    }),
    [inBrowser]
  );

  return useSSRObject;
};

const SSRChecker = (props) => {
  const { isBrowser, isServer } = useSSR();

  return (
    <p>{isBrowser ? "Im Browser ausgeführt" : "Auf dem Server ausgeführt"}</p>
  );
};

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

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

Zusammenfassung

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