在 react 应用中，直接绑定 `window.onload` 不可靠，因其可能被多次覆盖或在组件卸载后仍执行；应改用 `useeffect` 配合空依赖数组实现真正的“仅首次加载时执行”。
React 是声明式、组件化且具备生命周期管理的框架，而 window.onload 是原生浏览器事件，其行为与 React 的渲染机制存在根本性冲突。在您提供的高阶组件（HOC）代码中，每次 Layout 渲染都会重新赋值 window.onload = function() { UserInfo() }，这不仅会覆盖前一次的监听器（导致首次加载逻辑丢失），更严重的是：当多个页面共用该 Layout 时，后续页面的渲染会不断劫持 window.onload，造成不可预测的调用时机甚至重复请求。
✅ 正确做法是摒弃 window.onload，改用 React 官方推荐的副作用管理方式 —— useEffect：
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);
// 可选：触发错误状态或通知用户
}
};
// ✅ 仅在组件首次挂载时执行，等效于“应用级初始化”
useEffect(() => {
UserInfo();
}, []); // 空依赖数组 → 保证只运行一次
return <WrappedComponent {...props} UserInfo={UserInfo} />;
};
}
export default layout;? 关键说明：
- useEffect(() => { ... }, []) 中的空数组 [] 明确告诉 React：该副作用不依赖任何 props 或 state 变化，仅在组件挂载时执行一次，语义清晰、行为可预测；
- 与 window.onload 不同，useEffect 由 React 调度，能自动处理组件卸载清理（虽然本例无清理需求，但机制更健壮）；
- 即使该 Layout 被多个路由页面复用，每个页面实例的 useEffect 仍独立执行 —— 这正是您需要的“按需初始化”，而非全局单次触发（若需真正全局仅一次，应移至根组件如 App.js 或 Redux store 初始化逻辑中）；
- 建议为 UserInfo 异步操作添加错误边界或 loading 状态管理，避免静默失败。
? 进阶提示：若目标是「整个应用启动时只请求一次用户信息」，更合理的架构是将 UserInfo() 提前至路由配置前、或封装进自定义 Hook（如 useAuthInit()），配合 React.lazy + Suspense 或服务端预取（SSR）进一步优化体验。但就当前 HOC 场景而言，useEffect + 空依赖是最简洁、标准且符合 React 思维的解法。
