React中root.render()调用后无法立即渲染问题求助

React 18 中createRoot默认启用了自动批处理，渲染操作会被异步执行，所以调用root.render()后不会立即更新DOM。要实现同步渲染，可采用以下两种方案：

1. 使用 flushSync 强制同步渲染 #

导入react-dom中的flushSync，将root.render包裹在回调内，强制React立即完成渲染更新：

import { flushSync } from 'react-dom';

const domNew = document.createElement('div');
const root = createRoot(domNew);
flushSync(() => {
  root.render(content);
});
// 此时 domNew 已完成渲染，可直接用于后续位置计算

2. 等待渲染完成的Promise（React 18.2+） #

从React 18.2版本开始，root.render()会返回一个Promise，你可以通过await等待渲染完成后再执行后续逻辑：

const domNew = document.createElement('div');
const root = createRoot(domNew);
await root.render(content);
// 渲染完成，后续库可正常执行位置计算

若环境不支持async/await，可改用.then()链式调用：

root.render(content).then(() => {
  // 执行位置计算相关逻辑
});

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