ReactJS加载页异常：组件重复加载致加载层无法隐藏及实现方案咨询

看起来你遇到的核心问题是直接操作DOM + 组件重复render导致的加载层状态混乱，另外你还想知道React里类似jQuery ajaxStart的全局加载处理方式，我来一步步帮你解决：

一、修复当前加载层的问题 #

你现在的代码有两个关键问题：

1. 直接操作DOM违背React的数据流原则：React推荐通过状态（state）来控制UI，而不是直接调用document.getElementById修改样式，这种方式很容易因为组件渲染时序、状态更新等问题导致UI不一致。
2. 每次render都会执行DOM操作：当你点击按钮触发组件重新render时，哪怕isLoaded是true，代码也会执行DOM修改逻辑；如果组件因为父组件重渲染等原因被卸载重挂载，isLoaded会被重置为false，直接导致加载层一直显示。

改进后的代码示例 #

方案1：将加载层作为组件的一部分

把加载层集成到组件的render中，用状态直接控制它的显示：

class MainMenuButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoaded: false };
  }

  componentDidMount() {
    // 替换成实际的加载逻辑，比如接口请求、资源加载等
    this.setState({ isLoaded: true });
  }

  render() {
    const { isLoaded } = this.state;
    return (
      <>
        {/* 加载层：根据isLoaded控制显示 */}
        {!isLoaded && (
          <div id="loadingPageHTML" style={{ display: "inline-block" }}>
            加载中...
          </div>
        )}
        {/* 菜单内容：加载完成后显示 */}
        {isLoaded && (
          <div className="MainMenuButtons">
            {/* 你的子组件和按钮内容 */}
            <button onClick={this.handleButtonClick}>菜单按钮</button>
          </div>
        )}
      </>
    );
  }
}

方案2：如果加载层是全局独立元素

如果加载层是页面全局的（比如挂载在body下），可以用componentDidUpdate监听状态变化，避免每次render都操作DOM：

class MainMenuButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoaded: false };
    this.loadingElement = null;
  }

  componentDidMount() {
    this.loadingElement = document.getElementById("loadingPageHTML");
    // 执行加载逻辑后更新状态
    this.setState({ isLoaded: true });
  }

  componentDidUpdate(prevProps, prevState) {
    // 只有当isLoaded状态变化时才操作DOM
    if (prevState.isLoaded !== this.state.isLoaded) {
      this.loadingElement.style.display = this.state.isLoaded ? "none" : "inline-block";
    }
  }

  render() {
    const { isLoaded } = this.state;
    if (!isLoaded) return null; // 加载中返回占位元素或null
    return (
      <div className="MainMenuButtons">
        {/* 你的子组件和按钮内容 */}
      </div>
    );
  }
}

二、类似jQuery ajaxStart的全局加载实现 #

jQuery的ajaxStart是全局监听AJAX请求的开始，React里可以通过以下两种方式实现类似效果：

方式1：自定义Hook + Context全局状态管理 #

适用于函数组件项目，通过全局上下文共享加载状态：

// 1. 创建全局加载状态Context
import React, { createContext, useContext, useState } from 'react';

const LoadingContext = createContext();

export function LoadingProvider({ children }) {
  const [isLoading, setIsLoading] = useState(false);
  return (
    <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
      {children}
    </LoadingContext.Provider>
  );
}

// 2. 封装自定义Hook
export function useLoading() {
  return useContext(LoadingContext);
}

// 3. 封装带加载状态的请求函数
export async function fetchWithLoading(url, options = {}) {
  const { setIsLoading } = useLoading();
  setIsLoading(true);
  try {
    const res = await fetch(url, options);
    return await res.json();
  } finally {
    setIsLoading(false);
  }
}

在根组件中包裹LoadingProvider，然后在需要显示加载层的组件中用useLoading获取状态，控制全局加载层的显示。

方式2：Axios拦截器（如果用Axios做请求） #

这种方式和jQuery的ajaxStart/ajaxStop逻辑最接近，全局监听所有Axios请求：

import axios from 'axios';

// 请求开始时显示加载层
axios.interceptors.request.use(
  config => {
    document.getElementById("loadingPageHTML").style.display = "inline-block";
    return config;
  },
  error => {
    document.getElementById("loadingPageHTML").style.display = "none";
    return Promise.reject(error);
  }
);

// 请求结束时隐藏加载层
axios.interceptors.response.use(
  response => {
    document.getElementById("loadingPageHTML").style.display = "none";
    return response;
  },
  error => {
    document.getElementById("loadingPageHTML").style.display = "none";
    return Promise.reject(error);
  }
);

总结一下：优先用React的状态控制UI，避免直接操作DOM；全局加载状态可以根据项目技术栈，选择Context+Hook或请求拦截器的方案来实现。

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