react如何实时获取屏幕（浏览器视口）的宽度

实现步骤

1. 使用 useState 来保存窗口宽度。
2. 使用 useEffect 设置事件监听器，在组件挂载时添加 resize 事件监听器，并在组件卸载时清除事件监听器。
3. 在事件回调中更新 window.innerWidth。

代码实现

import React, { useState, useEffect } from 'react';

const WindowWidthComponent = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth); // 初始化宽度为当前窗口宽度

  useEffect(() => {
    // 定义处理窗口大小变化的函数
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    // 添加 resize 事件监听器
    window.addEventListener('resize', handleResize);

    // 清理函数：组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空数组作为依赖，意味着只在组件挂载和卸载时执行

  return (
    <div>
      <p>当前窗口宽度: {windowWidth}px</p>
    </div>
  );
};

export default WindowWidthComponent;

注：本人前端小白 ，如有不对的地方还请多多指教