React中使用createPortal或appendChild实现仅追加行为可行吗？

首先直接给你结论：ReactDOM.createPortal本身不能直接实现你要的“仅追加且不改动已渲染子元素”的效果——除非你完全把新元素的渲染和父组件的状态管理解耦。

为什么Portal不行（常规用法下） #

Portal的核心作用是把组件的DOM节点渲染到React组件树之外的DOM容器，但组件本身仍然属于父组件的React组件树的一部分。如果你还是用父组件的数组状态来维护所有Portal子元素（比如{childrenArray.map(child => createPortal(<Child />, container))}），那父组件每次更新数组时，React仍然会对所有Portal子元素进行diff对比——这和你原来的常规写法本质上没有区别，还是会触发全局的元素对比，解决不了卡顿问题。

不过，如果你换一种用法：父组件不维护所有子元素的列表，而是每次需要追加时，直接创建一个独立的Portal并挂载到目标容器，且这个Portal不在父组件的render函数循环中，那理论上可以避免旧元素的diff。但这种写法其实已经脱离了React的声明式范式，和直接用appendChild的差别不大，所以并不推荐。

推荐的替代方案 #

1. 使用独立React根动态挂载子元素（React 18+）

这是最符合声明式原则且能彻底解决diff卡顿的方案。你可以为每个新追加的子元素创建一个独立的React根，直接挂载到目标DOM容器中。这样每个子元素都是独立的React应用实例，完全不受父组件渲染流程的影响——父组件的任何更新都不会触发这些子元素的diff，子元素也可以完全自主管理自身状态。

示例代码：

// 父组件中处理追加逻辑
function ParentComponent() {
  const targetContainer = useRef(document.getElementById('myFavoriteDiv'));

  const handleAddChild = () => {
    // 为新子元素创建独立的React根
    const childRoot = createRoot(targetContainer.current);
    // 挂载子组件，它的状态完全自主管理
    childRoot.render(<ChildComponent />);
  };

  return <button onClick={handleAddChild}>追加新元素</button>;
}

这种方式比appendChild更优雅，因为它仍然用React的机制管理子组件的生命周期和状态，同时彻底隔离了父组件和子组件的渲染流程。

2. 用独立状态容器+专属渲染组件

如果需要统一管理追加动作的触发，可以创建一个全局状态容器（比如React Context或者简单的自定义状态管理器），再写一个专门的容器组件负责监听状态变化，每次收到“追加”指令时只渲染新的子元素，完全跳过旧元素的diff。

示例代码：

// 1. 创建一个Context用于传递追加指令
const AppendContext = createContext();

// 2. 专属容器组件，负责渲染新子元素
function AppendOnlyContainer() {
  const containerRef = useRef(null);
  const { addChild } = useContext(AppendContext);
  
  // 监听追加请求，只渲染新元素
  useEffect(() => {
    const handleAppend = (ChildComponent) => {
      const root = createRoot(containerRef.current);
      root.render(<ChildComponent />);
    };
    addChild(handleAppend);
  }, [addChild]);

  return <div ref={containerRef} />;
}

// 3. 父组件中使用
function ParentComponent() {
  const [appendHandlers, setAppendHandlers] = useState([]);

  const addChild = useCallback((handler) => {
    setAppendHandlers(prev => [...prev, handler]);
  }, []);

  const handleAdd = () => {
    // 通知所有监听者追加新子元素
    appendHandlers.forEach(handler => handler(ChildComponent));
  };

  return (
    <AppendContext.Provider value={{ addChild }}>
      <button onClick={handleAdd}>追加新元素</button>
      <AppendOnlyContainer />
    </AppendContext.Provider>
  );
}

这种方式既保持了声明式风格，又让父组件只负责触发动作，子元素的渲染和状态完全独立。

3. 彻底解耦父组件与子元素的状态

如果你不想用独立React根，可以让父组件只维护一个“追加触发信号”（比如一个递增的计数器），而不是所有子元素的数组。然后用一个子组件监听这个信号，每次信号变化时只渲染新的子元素，旧子元素则通过ref或DOM容器保存，不再参与React的diff流程。

示例代码：

function ParentComponent() {
  const [addTrigger, setAddTrigger] = useState(0);

  const handleAdd = () => {
    // 只更新触发信号，不维护子元素数组
    setAddTrigger(prev => prev + 1);
  };

  return (
    <>
      <button onClick={handleAdd}>追加新元素</button>
      <AppendChild trigger={addTrigger} />
    </>
  );
}

function AppendChild({ trigger }) {
  const containerRef = useRef(null);

  useEffect(() => {
    // 每次触发信号更新时，只渲染新的子元素
    const root = createRoot(containerRef.current);
    root.render(<ChildComponent />);
  }, [trigger]);

  return <div ref={containerRef} />;
}

总结 #

要解决你的问题，核心是让父组件不再参与所有子元素的状态维护和diff对比，而是只负责触发追加动作，子元素的渲染和状态管理完全独立于父组件的渲染流程。独立React根的方案是最直接有效的，既符合React的声明式原则，又能彻底避免全局diff带来的卡顿。

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