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

作者

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

Get window Width and Height in React

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

  1. 在对象上使用innerWidth和innerHeight属性window。
  2. 为钩子resize中的事件添加一个事件监听器。useEffect
  3. 在状态变量中保留对窗口宽度和高度的更改。
应用程序.js
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跟踪对象宽度和高度变化的状态变量window。

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

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

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因为我们只想为事件添加一次事件侦听器resize– 在初始渲染时。

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

  window.addEventListener('resize', handleWindowResize);

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

调整窗口大小时会

触发resize事件。

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

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

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

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

–

发表评论