掌握 React 的 useIsomorphicEffect 钩子

简介

在本实验中，我们将探索在 React 中使用 useIsomorphicEffect 钩子。这个钩子允许在服务器上解析 useEffect()，在客户端解析 useLayoutEffect()，确保无论在何种环境下都能执行相同的副作用。通过本实验，我们将学习如何使用 useIsomorphicEffect 钩子在我们的 React 应用程序中创建一致且可靠的副作用。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

React useIsomporphicEffect 钩子

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

为了确保在服务器上正确使用 useEffect()，在客户端正确使用 useLayoutEffect()，你可以使用 typeof 来检查 Window 对象是否已定义。如果已定义，返回 useLayoutEffect()，否则返回 useEffect()。以下是实现此功能的示例：

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

然后，在你的代码中，你可以像这个例子一样使用 useIsomorphicEffect()：

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

  return null;
};

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

当组件挂载时，这将在控制台中输出 'Hello'，并且在服务器和客户端上都能正常工作。

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

总结

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