React中如何实现window.load完成时执行方法且组件重渲染时也可触发？

DevOps 小满

2026-10-1

方案评估与优化实现

你当前的方案可以正常运行，但不是最优方案，存在几个可优化的问题：

模块级全局变量windowHasLoaded有状态污染风险：服务端渲染(SSR)场景下会跨请求共享状态导致错乱，页面存在多个该组件实例时也会互相干扰
代码存在笔误：判断条件写的是windowLoaded，和你定义的变量名windowHasLoaded不一致
额外引入了不必要的isReady状态，增加了无效的组件渲染开销

最优实现方案

不需要手动维护全局加载状态，直接读取浏览器原生提供的document.readyState属性即可：window.load事件触发后，document.readyState的值会固定为complete，天然就是全局正确的加载状态，无需自行维护。

优化后的代码如下：

import React from "react";

const MyComponent = () => {
  const doSomething = () => {
    // 你的业务逻辑
  }

  React.useEffect(() => {
    // 页面已经加载完成，直接执行逻辑
    if (document.readyState === 'complete') {
      doSomething()
      return
    }

    // 还未加载完成，绑定load事件监听
    const handleWindowLoaded = () => {
      doSomething()
    }
    window.addEventListener('load', handleWindowLoaded)

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('load', handleWindowLoaded)
    };
  }, []);

  return (
    <>
      <div>Test</div>
    </>
  );
};

export default MyComponent;

该方案的优势：