React 18中createRoot使用安全性及createPortal卸载方法问询

问题背景 #

将React 16旧代码迁移至React 18时，原ReactDOM.render/unmountComponentAtNode方法不再支持，目前已改用createRoot实现了模拟原生alert的弹窗工具，代码运行正常，但React文档指出createRoot不适合这类局部渲染场景，建议用createPortal。现提出两个问题：

1. 当前场景下使用createRoot是否安全？
2. 是否有React官方支持的机制，使用createPortal并安全卸载它？

1. 当前场景使用createRoot是否安全？ #

从功能运行层面看，你的代码目前是可用的，在多数业务场景下也能保持稳定，但需要注意React官方不推荐这种用法的核心原因：

• createRoot的设计目标是挂载整个应用的根节点，而非动态创建的临时局部节点。频繁创建/销毁独立Root可能引发边缘问题：
  • 独立Root无法共享主应用的上下文（如主题、国际化、状态管理等），若弹窗依赖这些上下文，会出现数据不一致
  • React的批量更新等内部优化机制，在独立Root中可能无法正常生效
• 若你的弹窗不需要依赖主应用上下文，且测试中未出现异常，短期内可以继续使用，但长期来看建议遵循官方规范迁移到createPortal方案。

2. 使用createPortal并安全卸载的官方方案 #

createPortal的核心是将组件渲染到DOM树的指定位置，但组件的生命周期仍由所属的React树控制。要实现动态弹窗的挂载/卸载，需将弹窗的状态纳入React组件体系管理，而非直接用原生DOM操作。

实现思路 #

1. 在主应用的根组件层级添加一个固定的弹窗容器节点
2. 实现一个弹窗管理器组件，内部维护弹窗列表状态，通过状态变化控制弹窗的挂载与卸载
3. 封装全局调用方法，触发弹窗管理器添加/移除弹窗

代码示例 #

弹窗管理器组件

import { useState, ReactNode } from 'react';
import { createPortal } from 'react-dom';

// 弹窗项类型定义
type DialogItem<TResult> = {
  id: string;
  content: (ctx: { resolve: (result: TResult) => void; close: () => void }) => ReactNode;
  resolve: (value: { canceled: boolean; result?: TResult }) => void;
};

// 初始化全局弹窗容器（优先用已有节点，无则动态创建）
const dialogContainer = document.getElementById('dialog-container') || (() => {
  const div = document.createElement('div');
  div.id = 'dialog-container';
  document.body.appendChild(div);
  return div;
})();

export function DialogManager() {
  const [dialogs, setDialogs] = useState<DialogItem<any>[]>([]);

  // 暴露给外部的弹窗调用方法
  const showDialog = <TResult>(
    content: (ctx: { resolve: (result: TResult) => void; close: () => void }) => ReactNode
  ): Promise<{ canceled: boolean; result?: TResult }> => {
    return new Promise((resolve) => {
      const id = Math.random().toString(36).slice(2);
      setDialogs(prev => [...prev, { id, content, resolve }]);
    });
  };

  // 关闭弹窗并处理结果
  const closeDialog = (id: string, canceled: boolean, result?: any) => {
    setDialogs(prev => {
      const targetDialog = prev.find(d => d.id === id);
      targetDialog?.resolve({ canceled, result });
      return prev.filter(d => d.id !== id);
    });
  };

  // 将showDialog挂载到全局，方便外部调用
  (window as any).showDialog = showDialog;

  return createPortal(
    <div className="dialog-manager-wrapper">
      {dialogs.map(dialog => {
        const ctx = {
          resolve: (result: any) => closeDialog(dialog.id, false, result),
          close: () => closeDialog(dialog.id, true)
        };
        return <div key={dialog.id} className="dialog-item">{dialog.content(ctx)}</div>;
      })}
    </div>,
    dialogContainer
  );
}

主应用中挂载管理器

// App.tsx
import { DialogManager } from './DialogManager';

function App() {
  return (
    <div className="app-container">
      {/* 主应用业务内容 */}
      <DialogManager />
    </div>
  );
}

弹窗调用示例

export async function showDialogAlert(props: ShowDialogAlertProps): Promise<void> {
  await (window as any).showDialog<void>(ctx => (
    <DialogAlert
      {...props}
      onClose={() => ctx.close()}
    />
  ));
}

方案优势 #

• 弹窗生命周期完全由React控制，符合官方设计规范
• 可共享主应用的所有上下文（状态、主题、国际化等）
• 避免独立Root带来的潜在问题，性能与稳定性更有保障

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