在使用 React 18 的 createRoot API 时，为什么直接调用 ReactDOM.render 会触发警告？如何正确迁移旧项目？

在使用 React 18 的 createRoot API 时，为什么直接调用 ReactDOM.render 会触发警告？如何正确迁移旧项目？

回答与解析：

React 18 引入了新的根渲染器（Root API），通过 createRoot 替代了旧的 ReactDOM.render 方法。当你在 React 18+ 环境中继续使用 ReactDOM.render()，React 会发出运行时警告：

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

这是因为 ReactDOM.render 属于“Legacy Root API”，它不支持 React 18 的并发特性（如自动批处理、可中断渲染等）。虽然代码可能暂时还能运行（出于向后兼容考虑），但官方明确表示该方法将在未来版本中移除。

正确迁移方式：

旧代码（React 17 及以下）：

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

新写法（React 18+）：

import { createRoot } from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(<App />);

注意：

• 不再需要 import ReactDOM，而是从 react-dom/client 中引入 createRoot；
• 需要显式创建 root 实例，再调用其 render 方法；
• 如果使用 StrictMode，只需包裹在 root.render 内部即可，无需额外改动。

此迁移不仅消除警告，还让应用能利用 React 18 的新特性，如自动批处理状态更新、流式 SSR 等。