react组件里怎么优雅地响应window_resize事件

React组件中如何优雅地响应Window Resize事件

导语

在现代响应式Web开发中，监听浏览器窗口大小变化是一个常见需求。无论是实现自适应布局、响应式组件，还是根据视口尺寸调整UI元素，正确处理window.resize事件都至关重要。本文将深入探讨在React组件中优雅监听和处理窗口大小变化的几种方案，分析各自的优缺点，并提供实际应用案例。

核心概念解释

为什么需要特殊处理resize事件？

window.resize事件有几个特点需要我们特别注意：

高频触发：当用户拖拽浏览器窗口时，该事件会以极高频率触发（每秒可能数十次）
性能影响：不恰当的处理会导致大量重排(reflow)和重绘(repaint)
内存泄漏风险：组件卸载时若未正确移除监听器，会导致内存泄漏

使用场景

在以下场景中，我们需要监听窗口大小变化：

响应式布局调整
图表/可视化组件的自适应渲染
移动端/PC端布局切换
根据视口尺寸加载不同资源
动态调整UI元素位置或尺寸

解决方案及优缺点

方案一：基础实现（不推荐）

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

function ResponsiveComponent() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

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

  return (
    <div>
      当前窗口尺寸: {windowSize.width} x {windowSize.height}
    </div>
  );
}

缺点： - 每次resize都会触发状态更新和组件重渲染 - 高频事件可能导致性能问题

方案二：使用防抖(debounce)优化

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

function DebouncedResizeComponent() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = debounce(() => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }, 200); // 200ms防抖间隔

    window.addEventListener('resize', handleResize);

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

  return (
    <div>
      防抖处理后的窗口尺寸: {windowSize.width} x {windowSize.height}
    </div>
  );
}

优点： - 减少事件处理频率 - 避免不必要的渲染

缺点： - 需要引入额外库（如lodash） - 响应有一定延迟

方案三：自定义Hook封装

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    let timeoutId = null;

    const handleResize = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });
      }, 100);
    };

    window.addEventListener('resize', handleResize);

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

  return windowSize;
}

// 使用示例
function CustomHookComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      自定义Hook获取的尺寸: {width} x {height}
    </div>
  );
}

优点： - 逻辑复用 - 内置简单节流实现 - 组件代码更简洁

方案四：使用ResizeObserver API（现代浏览器）

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

function ResizeObserverComponent() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;

    const observer = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      setDimensions({ width, height });
    });

    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div ref={ref}>
      元素尺寸: {dimensions.width} x {dimensions.height}
    </div>
  );
}

优点： - 更精确的元素尺寸监听 - 性能更好 - 可以监听任意元素而不仅是window

缺点： - 兼容性问题（IE不支持） - 需要polyfill

实战案例：响应式侧边栏

import { useState, useEffect } from 'react';

function ResponsiveSidebar() {
  const [isCollapsed, setIsCollapsed] = useState(false);

  useEffect(() => {
    const checkSize = () => {
      setIsCollapsed(window.innerWidth < 768);
    };

    const handleResize = debounce(checkSize, 200);

    // 初始检查
    checkSize();

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
      {!isCollapsed && (
        <div className="sidebar-content">
          <h3>导航菜单</h3>
          <ul>
            <li>首页</li>
            <li>产品</li>
            <li>关于我们</li>
            <li>联系方式</li>
          </ul>
        </div>
      )}
      <div className="sidebar-toggle">
        {isCollapsed ? '>' : '<'}
      </div>
    </div>
  );
}

// 辅助函数
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

小结

在React中优雅处理窗口resize事件，关键在于：

性能优化：使用防抖/节流减少处理频率
资源管理：组件卸载时正确移除事件监听
代码组织：通过自定义Hook实现逻辑复用
现代API：考虑使用ResizeObserver等新特性

根据项目需求选择合适方案，小型项目可以使用简单的防抖实现，大型应用建议封装为自定义Hook，需要精确控制元素尺寸时推荐ResizeObserver。

记住，良好的resize事件处理不仅能提升用户体验，还能显著改善应用性能。

posted @ 2025-07-04 00:44 富美阅读(55) 评论(0) 收藏举报

刷新页面返回顶部

推荐阅读

富美