React类组件中如何使用需优先执行完成且不依赖生命周期的异步函数

首先你当前的写法存在两个核心问题：

• 你使用的是异步立即执行函数（IIFE），并不是真正的ESM顶层await，代码执行到此处时只会把异步请求任务丢入事件循环，立刻继续往下执行组件定义、渲染的逻辑，天然不会等待异步请求返回
• 全局变量data不属于React组件的响应式状态（state/props），即便后续异步请求完成更新了data的值，React也无法监听到这个变化，不会触发组件重新渲染

方案1：使用真正的ESM顶层await（推荐） #

如果你的项目使用ES模块规范，且打包工具（Webpack 5+/Vite/Rollup等）支持顶层await特性，可以直接在模块顶层编写await逻辑，此时整个模块的加载会阻塞到异步请求完成后才会导出组件，组件渲染时data已经有确定值：

// 直接在模块顶层写await，无需包裹异步函数
const data = await asyncRequest();

class Test extends React.Component {
  render() {
    return <h1>Hello, {data}</h1>;
  }
}

方案2：搭配React.Suspense实现异步等待 #

如果不支持顶层await，又不想在类组件内使用生命周期方法，可以用Suspense处理异步加载逻辑，不需要修改Test组件的内部逻辑：

// 异步请求包装器，适配Suspense的加载逻辑
function wrapAsync(promise) {
  let status = 'pending';
  let result;
  const task = promise.then(
    res => {
      status = 'success';
      result = res;
    },
    err => {
      status = 'error';
      result = err;
    }
  );
  return {
    read() {
      if (status === 'pending') throw task;
      if (status === 'error') throw result;
      return result;
    }
  }
}

const dataSource = wrapAsync(asyncRequest());

class Test extends React.Component {
  render() {
    const data = dataSource.read();
    return <h1>Hello, {data}</h1>;
  }
}

// 外层使用Suspense指定加载兜底UI
function App() {
  return (
    <React.Suspense fallback={<div>数据加载中，请稍候</div>}>
      <Test />
    </React.Suspense>
  )
}

该方案下Suspense会自动监听异步请求状态，请求完成前展示兜底的加载提示，请求完成后自动渲染Test组件，无需在Test组件内编写任何生命周期相关代码。

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