如何让axe-core在React应用的状态变化或页面切换时自动执行扫描？

嘿，我完全懂你的困扰——默认的axe-core设置确实只会在页面初始加载时扫一次，遇到组件更新、路由切换或者模态框弹出时就没动静了，手动刷新实在太麻烦。结合你用的React 17和axe-core 4.10.2，我给你几个实用的方案，帮你搞定自动扫描的问题：

1. 关闭自动轮询，改用手动触发精准扫描 #

你当前代码里的axe(React, ReactDOM, 2000)是用定时轮询来扫描，但这种方式不够智能，还可能浪费资源。不如先关掉自动轮询，换成根据React的状态/路由变化来触发扫描：

修改App.js里的初始化代码：

const ReactDOM = require("react-dom");
let axeInstance;

if (process.env.NODE_ENV !== "production") {
  const axe = require("@axe-core/react").default;
  // 第三个参数传0，关闭自动轮询
  axeInstance = axe(React, ReactDOM, 0);
}

2. 监听路由切换触发全页扫描 #

如果你的应用用了react-router，只要监听location的变化，就能在页面切换时自动扫描：

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function App() {
  const location = useLocation();

  useEffect(() => {
    // 延迟500ms执行，确保页面组件完全渲染完成
    const scanTimer = setTimeout(() => {
      if (process.env.NODE_ENV !== "production" && axeInstance) {
        axeInstance.run().then(results => {
          console.log('路由切换后扫描结果:', results);
          // 你也可以把结果输出到自定义日志面板或者控制台
        });
      }
    }, 500);

    return () => clearTimeout(scanTimer); // 清理定时器，避免内存泄漏
  }, [location]); // 依赖location，路由变化时自动触发

  // ... 你的其他组件代码
}

3. 监听状态变化（比如模态框开关）触发扫描 #

针对模态框这类动态渲染的组件，你可以监听它的显示状态，在弹出后触发扫描，完全不用硬编码数据：

import { useState, useEffect } from 'react';

function MyComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    if (isModalOpen && process.env.NODE_ENV !== "production" && axeInstance) {
      // 延迟300ms，保证模态框DOM完全挂载
      const modalScanTimer = setTimeout(async () => {
        // 可以只扫描模态框元素，提升效率
        const modalElement = document.getElementById('user-modal');
        if (modalElement) {
          const results = await axeInstance.run(modalElement);
          console.log('模态框扫描结果:', results);
        } else {
          // 找不到元素就扫全页
          const results = await axeInstance.run();
          console.log('全页扫描结果:', results);
        }
      }, 300);

      return () => clearTimeout(modalScanTimer);
    }
  }, [isModalOpen]); // 依赖模态框状态，弹出/关闭时触发

  // ... 模态框相关代码
}

4. 封装自定义Hook，简化重复代码 #

如果很多组件都需要触发扫描，不如封装一个自定义Hook，复用逻辑：

import { useEffect } from 'react';

export function useAxeScan(dependencies = []) {
  useEffect(() => {
    if (process.env.NODE_ENV !== "production") {
      const scanTimer = setTimeout(async () => {
        const axe = require("@axe-core/react").default;
        const results = await axe.run();
        console.log('Axe扫描结果:', results);
      }, 300);

      return () => clearTimeout(scanTimer);
    }
  }, dependencies);
}

然后在任意组件里直接用：

function ProfilePage() {
  const [userData, setUserData] = useState({});

  // 当userData变化时自动扫描
  useAxeScan([userData]);

  // ... 组件代码
}

这些方案的核心思路就是精准控制扫描时机——在组件完全渲染、状态更新完成后再触发axe扫描，既避免了漏检，又不会做无用功。

内容来源于stack exchange