react 18 彻底弃用了 reactdom.render()，改用 createroot api 实现并发渲染；本文详解迁移步骤、代码示例及常见错误规避方法。
React 18 引入了全新的根节点（root）渲染机制，以支持自动批处理、Suspense 服务端流式渲染和并发特性。因此，旧版 ReactDOM.render() 不再被支持——即使代码能运行，也会触发警告并降级为 React 17 的同步渲染模式，导致无法享受新版本的核心优化。
✅ 正确迁移方式
首先，确保你使用的是 react@18.x 和 react-dom@18.x：
npm install react@18 react-dom@18 # 或 yarn add react@18 react-dom@18
然后，将入口文件（如 index.js 或 main.jsx）中的渲染逻辑全面替换：
❌ 错误写法（React 17 风格，已废弃）：
import React from 'react';
import ReactDOM from 'react-dom'; // ❌ 不再推荐
const rootElement = <h1>Hello world</h1>;
ReactDOM.render(
rootElement,
document.getElementById('root')
);✅ 正确写法（React 18 推荐）：
import React from 'react';
import { createRoot } from 'react-dom/client'; // ✅ 从 'react-dom/client' 导入
const rootElement = <h1>Hello world</h1>;
// 创建根容器（必须传入 DOM 节点）
const root = createRoot(document.getElementById('root'));
// 渲染内容（支持 StrictMode、Suspense 等新特性）
root.render(
<React.StrictMode>
{rootElement}
</React.StrictMode>
);⚠️ 注意事项：createRoot() 必须传入一个真实 DOM 元素（不能是 null），否则会抛出错误；不再支持 ReactDOM.render() 的第三个参数（回调函数），如需副作用，改用 useEffect 或 root.legacy_renderSubtreeIntoContainer()（不推荐）；StrictMode 在 React 18 中默认启用双渲染（开发环境），用于检测不安全的生命周期和副作用，建议始终包裹根组件；若项目中混用 ReactDOM.render() 和 createRoot()，React 将自动回退至兼容模式（React 17 行为），失去并发能力。
? 常见错误排查
报错 Cannot read properties of null (reading 'appendChild')
→ 检查 document.getElementById('root') 是否存在，确保 HTML 中有 <div id="root"></div>，且脚本在 DOM 加载后执行（或使用 DOMContentLoaded）。仍看到警告但代码已更新？
→ 检查是否遗漏了其他模块（如测试文件、第三方库封装层）中残留的 ReactDOM.render() 调用；全局搜索 ReactDOM\.render 可快速定位。使用 TypeScript？
确保 @types/react 和 @types/react-dom 版本 ≥ 18.0.0，并在 tsconfig.json 中启用 jsx: "react-jsx"。
✅ 总结
React 18 的 createRoot 不仅是语法变更，更是渲染模型的升级。它为应用开启并发渲染、自动批处理和更优的用户体验打下基础。迁移成本低、收益高——只需三步：更新依赖、替换导入路径、重构根渲染逻辑。尽早完成迁移，才能真正释放 React 18 的全部潜力。
