React useSSR 钩子

简介

在本实验中，我们将探索在 React 中使用 useSSR 钩子。这个钩子使我们能够检查代码是在浏览器还是服务器上运行，并提供有关环境的其他信息，例如工作线程的可用性、事件监听器和视口。完成本实验后，你将更好地理解如何编写针对不同环境进行优化的 React 代码。

React useSSR 钩子

虚拟机中已提供 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

要检查代码是在浏览器还是服务器上运行，创建一个自定义钩子，它使用 typeof、Window、Window.document 和 Document.createElement() 来确定 DOM 是否可用。使用 useState() 钩子定义 inBrowser 状态变量，并使用 useEffect() 钩子来更新它并在最后进行清理。使用 useMemo() 钩子来记忆自定义钩子的返回值。

以下是代码：

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 ? "在浏览器上运行" : "在服务器上运行"}</p>;
};

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

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了 React useSSR 钩子实验。你可以在 LabEx 中练习更多实验来提升你的技能。