React中react-DOM与react-DOM/client导入的渲染差异及疑问

核心差异点 #

• 版本与模式区分：react-dom/client是React 18推出的新API，专门用于启用并发模式；而旧版react-dom里的render方法属于兼容模式，是React 17及之前的标准写法。React 18保留旧API是为了兼容存量项目，但官方明确推荐新项目用react-dom/client。

• 新特性支持：
  新API的createRoot会开启React 18的所有并发特性，比如：

  • 自动批处理：不管是同步还是异步更新（比如setTimeout、Promise回调里的状态更新），都会自动合并成一次渲染，提升性能；旧版render只有同步更新会批处理，异步更新会触发多次渲染。
  • 支持useTransition、useDeferredValue这类并发钩子，能实现非阻塞的UI更新，避免复杂渲染时页面卡顿。
  • 改进的Suspense：配合懒加载组件时，加载状态的处理更流畅。

• 渲染行为细节：

  • 旧版ReactDOM.render(<App />, rootEl)如果多次调用，会直接替换根节点的内容；新版root.render(<App />)是增量更新，只会修改需要变化的部分，逻辑更合理。
  • 错误处理：新版API配合错误边界，能更好地处理并发渲染过程中的错误，而旧版在这方面的能力有限。

为什么同时提供两个？ #

完全是为了平滑迁移：大量旧项目基于旧版API开发，不可能强制一次性升级。React团队保留旧API并让它运行在兼容模式，既不破坏现有功能，又能让开发者逐步切换到新API享受到新特性。

你没发现差异的原因 #

如果你的项目是简单场景，没有用到React 18的并发特性（比如没有复杂的状态更新、懒加载、非阻塞渲染需求），那两种写法的视觉效果确实几乎一致。只有在涉及并发更新、性能优化的复杂场景下，差异才会显现出来。

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