当前位置：首页 > React

react如何触发resize事件

2026-01-24 22:30:29React

监听窗口 resize 事件

在 React 中监听窗口的 resize 事件，可以通过 useEffect 钩子实现。在组件挂载时添加事件监听器，并在卸载时移除。

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

function Component() {
  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>
      Window size: {windowSize.width} x {windowSize.height}
    </div>
  );
}

手动触发 resize 事件

如果需要手动触发 resize 事件，可以通过 window.dispatchEvent 模拟事件。

const triggerResize = () => {
  window.dispatchEvent(new Event('resize'));
};

// 调用 triggerResize() 即可触发 resize 事件

监听元素 resize 事件

对于特定 DOM 元素的尺寸变化，可以使用 ResizeObserver API。React 中可以通过 useRef 和 useEffect 结合实现。

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

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

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

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, []);

  return (
    <div ref={ref}>
      Element size: {dimensions.width} x {dimensions.height}
    </div>
  );
}

优化性能

频繁的 resize 事件可能影响性能，可以通过防抖（debounce）或节流（throttle）优化。

import { throttle } from 'lodash';

// 在 useEffect 中使用节流
useEffect(() => {
  const handleResize = throttle(() => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  }, 200);

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