React 18：带异步回调的ReactDOM.render转createRoot的等效写法及异步处理

基础迁移写法 #

React 18 中 ReactDOM.render 被 createRoot API 替代，基础替换代码如下：

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(container);
root.render(chart);

异步回调的处理方式 #

原代码里 ReactDOM.render 的第三个异步回调参数，在 React 18 中已被移除，需根据场景选择以下两种方案：

方案1：将逻辑移至根组件的 useEffect（推荐） #

把原回调中的异步逻辑放到 chart 根组件的 useEffect 钩子中，该钩子会在组件挂载完成后执行，完全对应原回调的触发时机：

import { useEffect } from 'react';

function Chart() {
  useEffect(() => {
    const postRenderLogic = async () => {
      // 原回调内的逻辑：设置图表单元格样式、通过 exceljs 向工作表添加单元格
    };
    postRenderLogic();
  }, []); // 空依赖数组确保仅在组件挂载后执行一次

  // 组件渲染内容
  return <div>{/* 图表内容 */}</div>;
}

方案2：外部强制同步渲染后执行逻辑（不推荐，影响并发特性） #

如果无法修改 chart 组件，可通过 ReactDOM.flushSync 强制同步完成渲染，再执行异步逻辑，这种方式会跳过 React 18 的并发优化，仅作为兼容旧代码的临时方案：

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(container);
// 强制同步渲染，确保DOM已更新
ReactDOM.flushSync(() => {
  root.render(chart);
});
// 执行原异步回调逻辑
(async () => {
  // 设置图表单元格样式、通过 exceljs 向工作表添加单元格
})();

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