使用JavaScript实时监测并获取屏幕宽度与高度

function handleResize() {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;
  // 可以在此处执行基于新尺寸的逻辑，例如更新DOM元素
  document.getElementById("app").innerHTML = `
    当前视口宽度: ${newWidth}px, 
    当前视口高度: ${newHeight}px
  `;
  console.log(`视口尺寸变化: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
}

// 1. 添加事件监听器，当窗口大小改变时触发handleResize函数
window.addEventListener("resize", handleResize);

// 2. 页面加载时立即获取并显示初始尺寸
// 确保在页面首次加载时也能获取到正确的尺寸
handleResize();

// 注意：在某些复杂应用中，如果不再需要监听，应移除事件监听器以避免内存泄漏。
// 例如：window.removeEventListener("resize", handleResize);

import { useEffect, useState } from 'react';

/**
 * 一个自定义React Hook，用于实时获取并返回浏览器视口的宽度和高度。
 * @returns {{width: number | undefined, height: number | undefined}} 包含当前视口宽度和高度的对象。
 */
export function useWindowSize() {
  // 使用useState来存储窗口尺寸，初始值为undefined
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    // 定义处理resize事件的函数
    function handleResize() {
      // 更新状态
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

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

    // 2. 首次渲染时立即获取尺寸，确保初始值正确
    handleResize();

    // 3. 返回一个清理函数，在组件卸载时移除事件监听器，防止内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组表示此Effect只在组件挂载时运行一次，卸载时清理

  return windowSize;
}

import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设useWindowSize Hook在同一目录或可导入路径

function MyResponsiveComponent() {
  const { width, height } = useWindowSize();

  if (width === undefined) {
    return <div>正在加载尺寸...</div>;
  }

  return (
    <div>
      <h1>我的响应式组件</h1>
      <p>当前视口宽度: {width}px</p>
      <p>当前视口高度: {height}px</p>
      {width && width < 768 ? ( // 确保width有值才进行比较
        <p>这是一个小屏幕设备。</p>
      ) : (
        <p>这是一个大屏幕设备。</p>
      )}
    </div>
  );
}

export default MyResponsiveComponent;

import { debounce } from 'lodash'; // 需要安装lodash库

function handleResizeOptimized() {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;
  console.log(`优化后视口尺寸变化: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
  // 执行其他逻辑，例如更新DOM或React状态
}

// 将handleResizeOptimized函数防抖，延迟300毫秒
const debouncedHandleResize = debounce(handleResizeOptimized, 300);

// 添加事件监听器
window.addEventListener("resize", debouncedHandleResize);
// 首次加载时调用
debouncedHandleResize(); 

// 在组件卸载或页面离开时，如果需要，可以移除防抖后的监听器
// 例如：window.removeEventListener("resize", debouncedHandleResize);