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;

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