17370845950

在 react 应用中，直接绑定 `window.onload` 常因组件生命周期与 dom 加载时序错位而失效；应改用 `useeffect` 配合空依赖数组，确保仅在组件挂载时执行一次初始化逻辑。

React 是声明式、基于组件生命周期的 UI 框架，其渲染流程（如虚拟 DOM 挂载、Fiber 调度）与传统 HTML 页面的 window.onload（等待所有资源加载完成）并不同步。尤其在使用高阶组件（HOC）封装布局时，window.onload = ... 的赋值行为存在严重隐患：

• ✅ 时机不可控：window.onload 可能在组件已挂载甚至卸载后才触发，导致 dispatch 作用于已销毁的 store 或引发内存泄漏；
• ❌ 重复覆盖风险：每次 HOC 渲染都会重新赋值 window.onload，覆盖前一个回调，造成逻辑丢失；
• ❌ SSR 不兼容：服务端渲染环境无 window 对象，直接访问将抛出 ReferenceError。

✅ 正确做法是利用 React 官方推荐的副作用机制 —— useEffect，并传入空依赖数组 []，使其等价于类组件中的 componentDidMount：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';

function layout(WrappedComponent) {
  return function Layout(props) {
    const dispatch = useDispatch();

    const UserInfo = async () => {
      try {
        const response = await me();
        const authUser = response.data.user;
        dispatch(updateOnboardingSteps(authUser.onboarding_steps_state));
      } catch (error) {
        console.error("Failed to fetch user info:", error);
        // 可选：统一错误处理或通知用户
      }
    };

    // ✅ 替代 window.onload：仅在 Layout 组件首次挂载时执行
    useEffect(() => {
      UserInfo();
    }, []); // 空依赖数组 → 仅执行一次

    return ;
  };
}

export default layout;

? 关键说明：

• useEffect(() => { ... }, []) 中的空数组明确告诉 React：该副作用不依赖任何 props/state，因此只在组件挂载（mount）时运行一次，卸载时也不会重复执行 —— 完美匹配“页面首次加载”的语义；
• 由于 Layout 是被多个页面复用的 HOC，该逻辑仍保持全局唯一触发（每个使用该 Layout 的页面实例各自触发一次），但不会像 window.onload 那样受浏览器加载阶段干扰；
• 若需进一步优化（如避免重复请求），可结合 Redux 状态做防重判断（例如检查 authUser 是否已存在），或使用自定义 Hook 封装带缓存的初始化逻辑。

? 额外建议：对于真正需要监听全局资源加载完成的场景（如字体、第三方脚本），应使用 document.readyState 或 PerformanceObserver，而非依赖 window.onload —— 但在 React 数据初始化中，useEffect + [] 始终是首选且最可靠的方案。