在 React 应用中，直接通过 document.getElementById 等原生 API 操作已渲染的 DOM 节点会破坏 React 的声明式更新机制，导致状态不一致、生命周期错乱和事件系统失效；应优先使用 createPortal 安全地将组件挂载到 DOM 任意节点。
在 react 应用中，直接通过 `document.getelementbyid` 等原生 api 操作已渲染的 dom 节点会破坏 react 的声明式更新机制，导致状态不一致、生命周期错乱和事件系统失效；应优先使用 `createportal` 安全地将组件挂载到 dom 任意节点。
React 的核心设计哲学是声明式 UI：开发者描述“界面应该是什么样子”，而 React 负责高效、可预测地将其同步到真实 DOM。一旦绕过 React 渲染流程（如手动调用 div.removeChild(h1)），就等于用命令式方式强行干预受控状态——这不仅违背设计初衷，更会引发一系列严重问题：
❌ 为什么直接操作 DOM 是危险的？
- 状态与视图脱节：React 维护着自己的虚拟 DOM 树和组件状态。手动删除 DOM 节点后，React 并不知情；若后续触发重渲染，该节点可能被重新插入，或因 reconciler 差异导致不可预知的 DOM 冲突。
- 生命周期中断：组件的 useEffect 清理函数、componentWillUnmount 等不会执行，资源（如定时器、事件监听器、WebSocket 连接）可能泄漏。
- 事件系统失效：React 的合成事件依赖于其事件委托机制。脱离 React 控制的 DOM 节点无法正确捕获/冒泡 React 事件，onClick、onKeyDown 等行为将失灵。
- Ref 失效与调试困难：通过 ref 获取的 DOM 元素可能已被手动移除，ref.current 变为 null；DevTools 也无法追踪该节点的组件归属。
你示例中的写法：
function Component() {
return <h1 id="delete">"Hello World"</h1>;
}
div.render(<component></component>); // ✅ React 渲染
const h1 = document.getElementById("delete"); // ⚠️ 越权访问
div.removeChild(h1); // ❌ 破坏 React 内部一致性
本质上是在 React “画完画”之后，用橡皮擦掉一部分——但 React 还以为那块画布完好无损，下次作画时必然出错。
React Native For Android 源码编译 中文WORD版
下载
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
✅ 正确方案：使用 createPortal 实现受控的 DOM 外部挂载
当确实需要将组件渲染到 DOM 树中非父级位置时（例如模态框、Tooltip、全局通知），应使用 React Portal —— 它是 React 官方提供的、完全兼容声明式范式的解决方案。
基础用法
import { createPortal } from 'react-dom';
function Modal({ children, isOpen }) {
if (!isOpen) return null;
// 渲染到 body 下的指定容器（需提前在 HTML 中定义）
return createPortal(
<div classname="modal-overlay">
<div classname="modal-content">{children}</div>
</div>,
document.getElementById('modal-root') // ✅ 真实 DOM 节点
);
}
// 在 public/index.html 中添加：
// <div id="modal-root"></div>
关键特性与注意事项
- 仍属 React 组件树：Portal 内组件逻辑上仍是其父组件的子组件，响应父组件重渲染、继承 Context、触发父组件的 useEffect 清理等。
- 事件冒泡正常：合成事件仍沿 React 组件树向上冒泡（而非真实 DOM 树），确保逻辑一致性。
- CSS 隔离需注意：样式不再受父容器 CSS 选择器影响（如 .main .modal 不生效），推荐使用 CSS Modules、CSS-in-JS 或全局类名。
- 无障碍支持良好：配合 aria-modal="true" 和焦点管理，Portal 是构建可访问模态框的推荐方式。
? 总结：坚守声明式边界
React 不禁止你接触 DOM，但要求你通过 React 的契约来接触。createPortal 是唯一被官方认可的、安全的“跨边界渲染”机制；而任何绕过 render() / useState / useEffect 的直接 DOM 操作，都是对 React 设计原则的背离，终将付出维护成本陡增、Bug 难以复现的代价。记住：不是不能操作 DOM，而是必须让 React 知道你在操作什么、何时操作、为何操作。
