Next.js 使用窗口或文档对象

在 Next.js 中可以通过 useEffect 和 useLayoutEffect 钩子来访问窗口（window）或文档（document）对象，从而实现相应的操作。

访问窗口对象

可以使用 useEffect 钩子来访问窗口对象。这里提供一个例子——当窗口被调整大小时，更新屏幕宽度和高度：

import { useState, useEffect } from "react";

function MyComponent() {
  const [dimensions, setDimensions] = useState({
    height: window.innerHeight,
    width: window.innerWidth,
  });

  useEffect(() => {
    function handleResize() {
      setDimensions({
        height: window.innerHeight,
        width: window.innerWidth,
      });
    }
    
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div>
      <p>Width: {dimensions.width}</p>
      <p>Height: {dimensions.height}</p>
    </div>
  );
}

这里使用 useState 钩子来维护窗口尺寸，而在 useEffect 钩子中监听窗口尺寸变化。

需要注意的是，在调用 addEventListener 时需要提供清除事件监听器的函数，否则在组件卸载时可能会导致内存泄漏。

访问文档对象

可以使用 useLayoutEffect 钩子来访问文档对象。这里提供一个例子——将 body 元素的背景颜色设置为随机值：

import { useLayoutEffect } from "react";

function MyComponent() {
  useLayoutEffect(() => {
    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    document.body.style.backgroundColor = randomColor;
  }, []);

  return <div>Hello, world!</div>;
}

这里使用 useLayoutEffect 钩子来确保在组件挂载后尽快设置 body 元素的背景颜色。在 useLayoutEffect 钩子的回调函数中，可以根据需要使用文档对象来实现相应的操作。

需要注意的是，由于 useLayoutEffect 钩子的性质，如果在回调函数中执行非常耗时的操作，可能会导致页面卡顿甚至假死。