React框架下可安全操作DOM（尤其是删除节点）的合法方案有哪些？

存在完全不破坏React运行逻辑的原生DOM操作途径，核心原则是确保React内部的虚拟DOM状态和实际DOM树状态始终对齐，针对删除节点的需求，有两种常用的落地方式：

方案1：半管控模式（仍由React持有节点状态，仅优化删除性能） #

这个方案适合需要保留React对节点的后续管控能力，只是想优化大批量删除性能的场景：

• 首先通过React官方提供的useRef（函数组件）/createRef（类组件）API获取目标列表/节点的真实DOM引用，这是React允许的合法原生DOM访问入口
• 直接用原生DOM APIremove()批量删除目标节点，原生批量操作的性能远高于React逐个diff卸载的性能
• 完成删除后必须立刻更新对应的React状态（比如删除列表渲染源数据中对应的条目），确保下一次React触发重渲染时，生成的虚拟DOM树中已经不存在被删除的节点，两边状态完全对齐
• 示例代码：

import { useRef, useState } from 'react';

function LongList() {
  const listRef = useRef(null);
  const [listData, setListData] = useState(
    Array.from({length: 2000}, (_, idx) => ({ id: idx, content: `列表项${idx}` }))
  );

  const handleBatchDelete = () => {
    // 原生批量删除前1000个节点
    const itemNodes = listRef.current.querySelectorAll('.list-item');
    for (let i = 0; i < 1000; i++) {
      itemNodes[i]?.remove();
    }
    // 同步更新React状态，对齐虚拟DOM
    setListData(prev => prev.slice(1000));
  };

  return (
    <div>
      <ul ref={listRef}>
        {listData.map(item => (
          <li key={item.id} className="list-item">{item.content}</li>
        ))}
      </ul>
      <button onClick={handleBatchDelete}>批量删除前1000项</button>
    </div>
  );
}

方案2：完全脱离管控模式（React不干预容器内部内容） #

如果你要操作的节点本身不需要React做后续的状态同步、事件绑定等管控，可以用这个方案，内部所有DOM操作完全不会和React逻辑冲突：

• 用React.memo（函数组件）或重写shouldComponentUpdate（类组件），让容器组件永远跳过重渲染，React不会再对容器内部的DOM做diff操作
• 容器内部的所有节点增删完全用原生DOM API实现，不需要同步任何React状态
• 示例代码：

import { useRef, useEffect, memo } from 'react';

// 比较函数永远返回true，代表props无变化，永远不触发重渲染
const UncontrolledDomContainer = memo(() => {
  const containerRef = useRef(null);

  useEffect(() => {
    // 初始化完全用原生生成节点
    const container = containerRef.current;
    for (let i = 0; i < 10000; i++) {
      const div = document.createElement('div');
      div.className = 'dynamic-node';
      div.textContent = `动态节点${i}`;
      container.appendChild(div);
    }
  }, []);

  const handleDelete = () => {
    // 直接原生删除，不需要修改任何React状态
    const nodes = containerRef.current.querySelectorAll('.dynamic-node');
    for (let i = 0; i < 500; i++) {
      nodes[i]?.remove();
    }
  };

  return (
    <div ref={containerRef}>
      <button onClick={handleDelete}>删除前500个节点</button>
    </div>
  );
}, () => true);

核心注意事项 #

• 绝对不要删除React管控下的节点后不同步状态，否则React下一次diff时会找不到对应节点，触发渲染错位、事件失效甚至崩溃问题
• 临时隐藏节点的场景优先用原生修改display: none实现，性能和删除相当，且风险更低
• 所有DOM操作尽量放在事件回调或useEffect中执行，不要在render阶段、useLayoutEffect执行前操作DOM，避免和React渲染流程冲突

内容的提问来源于stack exchange，提问作者Trident D'Gao