React中window.onload移动端不触发、桌面端正常的问题求助

我需要根据初始布尔值运行两个函数中的一个，用window.onload来决定执行哪一个（原代码用于控制页面显示内容）。这个方案在桌面浏览器正常，但移动端无法生效。

简化后的测试代码如下：

import "./App.css";
import React from "react";

function App() {
  var startBoolean = true;                // starting condition, will be changed "manually"

  window.onload = (event) => {
    onLoadFunction();
  };

  const onLoadFunction = () => {
    if (startBoolean === true) {
      functionOnTrue();
    }
    if (startBoolean === false) {
      functionOnFalse();
    }
  };

  const functionOnTrue = async () => {
    console.log("Runing functionOnTrue");
    alert("Runing functionOnTrue");
  };

  const functionOnFalse = async () => {
    console.log("Runing functionOnFalse");
    alert("Runing functionOnFalse");
  };

  return (
    <div className="App">
      <button onClick={onLoadFunction}>Test onLoadFunction</button>
    </div>
  );
}

export default App;

代码在桌面端正常运行，但移动端没有弹窗提示，必须手动点击「Test onLoadFunction」按钮才能执行函数。请问这是什么原因？另外我是React新手。

核心原因 #

1. React组件渲染与window.onload的时序冲突
   React组件的渲染是异步过程，当window.onload触发时，你的App组件可能还没完成渲染，此时onLoadFunction这个函数还未被定义，调用会直接失败（可以打开移动端浏览器控制台查看是否有函数未定义的报错）。桌面端因为性能较好，组件渲染速度快于window.onload的触发时机，所以能正常执行。

2. 移动端浏览器的交互限制
   现在多数移动端浏览器会拦截页面加载完成后自动弹出的alert这类交互框，防止恶意网站骚扰用户，只有用户主动触发的操作（比如点击按钮）才能唤起弹窗。哪怕window.onload里的代码执行了，alert也会被浏览器拦截。

React场景下的正确写法 #

在React中，不要用window.onload处理组件内的初始化逻辑，应该用React官方推荐的useEffect钩子来处理这类副作用：

import "./App.css";
import React, { useEffect } from "react";

function App() {
  const startBoolean = true; // 不需要后续修改的话，推荐用const

  // useEffect会在组件挂载完成后执行，相当于类组件的componentDidMount
  useEffect(() => {
    onLoadFunction();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  const onLoadFunction = () => {
    if (startBoolean) { // 布尔值可直接判断，无需写===true
      functionOnTrue();
    } else {
      functionOnFalse();
    }
  };

  const functionOnTrue = async () => {
    console.log("Running functionOnTrue");
    alert("Running functionOnTrue");
  };

  const functionOnFalse = async () => {
    console.log("Running functionOnFalse");
    alert("Running functionOnFalse");
  };

  return (
    <div className="App">
      <button onClick={onLoadFunction}>Test onLoadFunction</button>
    </div>
  );
}

export default App;

补充说明 #

• 即便改用useEffect，移动端浏览器可能还是会拦截自动弹出的alert，这是浏览器的安全策略。如果你的实际需求是控制页面显示内容而非弹框，这个写法完全没问题，因为DOM渲染操作不会被拦截。
• 作为React新手，要尽量避免直接使用原生事件钩子（比如window.onload）或操作原生DOM，优先用React提供的API，能避开很多生命周期时序问题。

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