关于React 19 兼容的一点疑问？

[lanzhi-lee]

v5版本的使用指南中提到 React 19 兼容问题

文中提到

由于 React 19 调整了 react-dom 的导出方式，导致 antd 无法直接使用 ReactDOM.render 方法。因而使用 antd 会遇到以下问题：

• 波纹特效无法正常工作
• Modal、Notification、Message 等组件的静态方法无效（hooks 调用方式不受影响）

涉及的关键代码我截图如下：
图1 @ant-design/v5-patch-for-react-19

图2 antd components/config-provider/UnstableContext.tsx

图3 rc-util/lib/React/render

图4 antd: components/modal/confirm.tsx

上述图234调用我理解：
confirm 函数使用 unstableSetRender 方法获取到了 UnstableContext 中使用 let 定义的 unstableRender 函数，而不是直接引用ReactDOM.render

我不理解的是：

1. 既然已经通过 unstableSetRender 抹平了ReactDOM中 render 和 createRoot 的函数签名，并且在不同的React版本中动态判断了真实使用的方法，那图1 这个补丁存在的意义是啥呢？
2. 图1 中使用 unstableSetRender 修改后的 unstableRender 方法，不是和原本定义的逻辑上完全一致吗？
3. 仅仅是为了把root挂在container上吗？是有什么我没考虑到的呢？

  container._reactRoot ||= createRoot(container);
  const root: ReturnType<typeof createRoot> = container._reactRoot;
  root.render(node);

[dosubot[bot]]

Hi @lanzhi-lee! I'm Dosu and I’m helping the ant-design team.

你的理解很接近了，补充几点关键点：

1. 补丁的意义
   @ant-design/v5-patch-for-react-19 的主要作用是让 antd v5 在 React 19 环境下静态方法（如 Modal、Notification、Message）和波纹特效能正常工作。因为 React 19 移除了 ReactDOM.render，而这些静态方法底层依赖了它，直接升级会导致功能失效。补丁通过注册新的 render 方法（用 createRoot），让这些静态方法能继续工作，抹平了 API 差异。官方说明

2. unstableSetRender 的逻辑
   补丁和你手动调用 unstableSetRender 的实现本质上是一样的，都是用 createRoot 挂载并渲染节点，然后返回一个异步的卸载函数（用 setTimeout 包裹，确保卸载时机和 React 生命周期兼容）。补丁只是把这套逻辑自动注册到 antd 内部，用户无需关心细节。源码示例

3. 不仅仅是挂 root
   除了挂载 root，补丁还负责 root 的复用（container._reactRoot ||= createRoot(container)），以及异步卸载（setTimeout），这些细节是为了兼容 React 19 的新生命周期和避免内存泄漏。原来的 ReactDOM.render/unmountComponentAtNode 已经不适用，必须用新的 root API 并处理好卸载时机，否则会有残留节点或副作用。

4. 后续变化
   随着 React 19 逐步成为主流，Ant Design v5 已经在近期移除了这个补丁和 unstableSetRender（见 PR #55274），现在直接用现代的 createRoot API，不再需要额外补丁或注册逻辑，代码也更简洁。

总结：补丁和 unstableSetRender 的实现是等价的，但补丁是官方推荐的自动化方案，主要解决静态方法和特效的兼容问题，核心不仅仅是 root 挂载，还包括复用和异步卸载等生命周期细节。现在 v5 已经原生支持 React 19，无需再用补丁。

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[zombieJ]

在 React 18 之前，createRoot 仍然为保持兼容在 react-dom 里直接导出。在 React 19，createRoot 仅在 react-dom/client 中导出。所以无法兼容。

你或许会疑问，为什么不直接写两个：

import { render } from 'react-dom';
import { createRoot } from 'react-dom/clinet';

export function render(...) {
  if (createRoot) {
    ...
  }

  ...
}

因为在 React 17 之前，react-dom/client 不存在，而在 React 19 render 也不存在于 react-dom 中。所以直接 import 的兼容代码在两个版本中都会编译报错。

[lanzhi-lee]

我懂了，于是：

• 如果用户是 React18，那么在 react-dom 这个入口可以解构出 createRoot，就可以正常使用
• 如果用户是 React19，因为 react-dom 中没有 createRoot，所以还是必须手动主动导入 @ant-design/v5-patch-for-react-19