react如何触发resize事件
触发 Resize 事件的方法
在 React 中监听或触发 resize 事件通常涉及以下方法，具体取决于使用场景：
使用 useEffect 监听窗口 resize
通过 useEffect 添加和移除全局 resize 事件监听器，适用于组件需要响应窗口大小变化的情况：
import React, { useEffect } from 'react';
function Component() {
useEffect(() => {
const handleResize = () => {
console.log('Window resized');
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return <div>Resize listener active</div>;
}手动触发自定义 resize 事件
如果需要主动触发 resize 事件（例如模拟窗口大小变化），可以通过 dispatchEvent 实现：
const triggerResize = () => {
window.dispatchEvent(new Event('resize'));
};
// 调用 triggerResize() 即可触发监听元素尺寸变化（ResizeObserver）
对于非窗口元素，使用 ResizeObserver 监听 DOM 元素尺寸变化：
useEffect(() => {
const observer = new ResizeObserver((entries) => {
entries.forEach(entry => {
console.log('Element resized:', entry.contentRect);
});
});
const target = document.getElementById('target-element');
if (target) observer.observe(target);
return () => observer.disconnect();
}, []);第三方库（如 react-use）
简化实现的库如 react-use 提供现成的 Hook：
import { useWindowSize } from 'react-use';
function Component() {
const { width, height } = useWindowSize();
return <div>Window size: {width}x{height}</div>;
}注意事项
- 避免在频繁触发的
resize事件中执行高成本计算，建议使用防抖（debounce）优化性能。 - 组件卸载时务必清除事件监听或观察器，防止内存泄漏。
ResizeObserver是更现代的替代方案，适用于非窗口元素的尺寸监听。
