如何从ReactDOM.render切换到使用createRoot？

React 18起不再支持ReactDOM.render，需改用createRoot，切换前应用会兼容React 17行为，具体切换步骤如下：

1. 修改导入语句 #

• 旧写法（React 17及更早）：

import ReactDOM from 'react-dom';

• 新写法（React 18+）：

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

2. 更新渲染逻辑 #

• 旧写法：

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

• 新写法：

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

服务端渲染场景的特殊处理 #

如果你的应用使用服务端渲染（SSR），原有的ReactDOM.hydrate需替换为hydrateRoot：

• 旧写法：

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

• 新写法：

import { hydrateRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
hydrateRoot(rootElement, <App />);

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