迹忆客 专注技术分享

在 React 中获取窗口的宽度和高度：

1. 使用 window 对象的 innerWidth 和 innerHeight 属性。
2. 在 useEffect 钩子中为 resize 事件添加事件侦听器。
3. 将窗口宽度和高度的更改保存在状态变量中。

import {useEffect, useState} from 'react';

export default function App() {
  const [windowSize, setWindowSize] = useState(getWindowSize());

  useEffect(() => {
    function handleWindowResize() {
      setWindowSize(getWindowSize());
    }

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, []);

  return (
    <div>
      <h2>Width: {windowSize.innerWidth}</h2>

      <h2>Height: {windowSize.innerHeight}</h2>
    </div>
  );
}

function getWindowSize() {
  const {innerWidth, innerHeight} = window;
  return {innerWidth, innerHeight};
}

我们初始化了一个名为 windowSize 的状态变量，它跟踪窗口对象的宽度和高度的变化。

innerWidth 属性返回窗口的内部宽度（以像素为单位）。 这包括垂直滚动条的宽度（如果存在）。

innerHeight 属性以像素为单位返回窗口的内部高度，包括水平滚动条的高度（如果存在）。

我们将一个空的依赖数组传递给 useEffect 钩子，因为我们只想为 resize 事件添加一次事件监听器 - 在初始渲染时。

useEffect(() => {
  function handleWindowResize() {
    setWindowSize(getWindowSize());
  }

  window.addEventListener('resize', handleWindowResize);

  return () => {
    window.removeEventListener('resize', handleWindowResize);
  };
}, []);

调整窗口大小时会触发 resize 事件。

每次调整窗口大小时，我们都会根据窗口新的innerWidth和innerHeight更新windowSize状态变量。

我们从 useEffect 钩子返回的函数将在组件卸载时被调用。

我们使用 removeEventListener 方法来移除我们之前注册的事件监听器。

清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。