requestAnimationFrame在React防抖resize时跨浏览器表现不一致咨询

这是个很典型的浏览器行为差异问题，不同厂商在resize事件和requestAnimationFrame的协同处理上确实有不一样的实现逻辑，咱们来逐个拆解你的疑问：

一、快速拖动窗口时的表现差异：不是你的理解错误，是浏览器实现策略不同 #

MDN提到的“行为一致”指的是requestAnimationFrame的核心语义——在浏览器下一次重绘前执行回调，但resize事件的触发频率是由浏览器自己决定的，这属于厂商的实现细节：

• 旧版Edge（基于EdgeHTML引擎）在连续拖动窗口调整大小时，会对resize事件做内部节流，每一个渲染帧只触发一次resize事件，刚好和你的requestAnimationFrame防抖逻辑匹配，所以控制台输出符合预期。
• Chrome和Firefox则会在窗口尺寸的每一次微小变化时都触发resize事件（哪怕这些变化发生在同一渲染帧内），如果你的防抖逻辑没有做“是否已有回调待执行”的判断，就会导致同一帧内多个requestAnimationFrame回调被添加，最终多次输出日志。

二、最大化窗口时触发次数不同：窗口尺寸调整的分步逻辑导致 #

窗口最大化的过程中，浏览器内部其实是分步骤调整尺寸的：

• Chrome和Firefox会先将窗口拉伸到接近屏幕的尺寸，然后再做一次精细调整（比如适配窗口边框、系统UI的占位空间），这两步会触发两次resize事件。
• 旧版Edge则将这两步调整合并成了一次resize事件触发，所以只会输出一次日志。

三、修正防抖逻辑的建议 #

要让不同浏览器表现一致，你需要在防抖逻辑中添加一个“锁”，确保同一帧内只处理一次resize事件。在React中可以用useRef来保存这个锁的状态（避免组件渲染时重置）：

import { useEffect, useRef } from 'react';

function ResizeHandler() {
  // 用useRef保存是否已有resize回调待执行的状态
  const isResizePending = useRef(false);

  useEffect(() => {
    const handleResize = () => {
      if (!isResizePending.current) {
        isResizePending.current = true;
        requestAnimationFrame(() => {
          // 这里写你的resize处理逻辑
          console.log('窗口尺寸已调整');
          // 处理完后解锁，允许下一次resize触发
          isResizePending.current = false;
        });
      }
    };

    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>拖动窗口边缘试试~</div>;
}

这样修改后，不管浏览器触发多少次resize事件，同一渲染帧内只会执行一次你的处理逻辑，不同浏览器的表现就会统一了。

内容的提问来源于stack exchange，提问作者Rodolphe