React页面退出时调用API，刷新时禁止触发的实现需求

问题分析 #

beforeunload事件会在页面刷新、关闭标签页、导航到其他页面时统一触发，无法直接区分刷新和页面退出场景。要实现仅在页面退出（关闭标签页/跳转至其他页面）时调用目标API，需要通过监听用户交互来标记刷新行为，进而在事件中做判断。

解决方案思路 #

核心是通过记录用户是否触发了刷新操作（比如点击刷新按钮、按下F5/Ctrl+R等），在beforeunload事件中判断是否执行API调用。

具体实现步骤 #

• 定义状态变量isRefresh标记是否为刷新操作
• 监听keydown事件，捕获F5、Ctrl+R、Cmd+R等刷新快捷键
• 监听mousedown事件，识别点击浏览器刷新按钮的行为
• 在beforeunload事件中，仅当isRefresh为false时调用API
• 组件卸载时移除所有监听事件，避免内存泄漏

完整代码示例 #

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

function Component() {
  const [isRefresh, setIsRefresh] = useState(false);

  useEffect(() => {
    // 捕获快捷键触发的刷新
    const handleKeyDown = (e) => {
      if ((e.key === 'F5') || (e.ctrlKey && e.key === 'r') || (e.metaKey && e.key === 'r')) {
        setIsRefresh(true);
      }
    };

    // 捕获鼠标点击浏览器刷新按钮的行为
    const handleMouseDown = (e) => {
      const target = e.target;
      // 适配主流浏览器刷新按钮的元素特征，可根据实际情况调整
      if (target.tagName === 'svg' || target.closest('[title="刷新"]') || target.closest('[aria-label="刷新"]')) {
        setIsRefresh(true);
      }
    };

    // 处理页面卸载前逻辑
    const handleBeforeUnload = () => {
      if (!isRefresh) {
        beforeEventListener();
      }
    };

    // 添加事件监听
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('mousedown', handleMouseDown);
    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('mousedown', handleMouseDown);
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [isRefresh]);

  function beforeEventListener() {
    // 这里写你的API调用逻辑
    console.log('仅在页面退出时触发的API调用');
  }

  return (
    <div>
      {/* 你的前端代码 */}
    </div>
  );
}

export default Component;

补充说明 #

• 不同浏览器的刷新按钮元素特征可能存在差异，上述判断逻辑为通用适配，若需要更精准的识别，可针对具体浏览器做特殊处理。
• 该方案能覆盖绝大多数常见刷新场景，但无法100%拦截所有刷新操作（比如通过浏览器菜单触发的刷新），可根据业务需求调整适配范围。

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