React18中createRoot与ReactDOM.render的区别是什么？

DevOps 小满

2026-8-1

React18中createRoot与ReactDOM.render的差异

并发渲染特性支持：createRoot是React18专门为开启并发渲染打造的新入口，像自动批处理、startTransition、Suspense的进阶特性这些只有通过它才能正常启用。举个例子，之前ReactDOM.render在setTimeout、Promise.then这类异步回调里的状态更新会逐个触发重渲染，而createRoot会自动把这些异步场景下的更新合并成一次批处理，有效提升渲染性能。ReactDOM.render完全不支持这些新特性，在React18环境中使用它会触发兼容模式，控制台还会弹出警告提示你切换到createRoot。

API调用形式差异：
旧版ReactDOM.render写法：

import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

新版createRoot写法：

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

能明显看出，createRoot先创建根实例，再调用render方法，结构更清晰，也方便后续调用卸载等操作。

组件卸载方式不同：ReactDOM.render要卸载组件得调用ReactDOM.unmountComponentAtNode(rootElement)，需要传入根元素；而createRoot创建的根实例直接调用root.unmount()即可，无需再传根元素，用法更直观简洁。
错误处理逻辑变化：使用createRoot时，若渲染错误未被错误边界捕获，整个根组件树会被卸载，防止错误扩散影响全局；而ReactDOM.render遇到未捕获错误时，仅会打印错误日志，但组件树会保留（不过在React18中使用旧API会强制进入兼容模式，行为趋近于旧版本，但官方强烈建议用错误边界处理错误）。另外，createRoot对错误边界的要求更严格，未使用错误边界处理组件错误时，控制台会给出明确警告。