跨端框架不操作真实DOM，而是将JSX转为原生视图树；document等API在非Web环境不存在，需用ref机制替代；innerHTML/innerText失效，样式通过属性直译，事件须用props绑定。
跨端框架（如 React Native、Taro、UniApp）不直接操作浏览器 DOM，它们把 HTML/JSX 结构转成平台原生视图树，DOM 只是开发时的抽象参考，不是运行时真实存在——这点必须先确认清楚，否则所有映射逻辑都会跑偏。
为什么不能直接复用 document 或 getElementById
React Native 没有 document 对象，也没有 body 或 head；Taro 在小程序环境里用的是 wx / swan 等私有 API，不是标准 DOM 接口；UniApp 编译到 App 端时走的是 WebView + 原生桥接，DOM 仅在 WebView 内部分存在。这些环境里调用 document.querySelector 会直接报 ReferenceError: document is not defined。
- 错误现象：本地开发能跑，一打包到小程序或 App 就崩溃，堆栈指向某行
document.getElementById - 根本原因：跨端框架在非 Web 环境下主动屏蔽或未实现 DOM API，不是“没加载好”，而是压根不存在
- 替代方案：统一用框架提供的 ref 机制（如 React 的
useRef、Taro 的createRef）获取组件实例，再调用其平台适配的方法（如scrollIntoView、focus）
innerHTML 和 textContent 在跨端中完全失效
这两个属性依赖浏览器渲染管线，在原生环境没有对应语义。比如你给一个 <View></View> 设置 innerHTML，不会渲染任何内容；设 textContent 也只会触发警告或静默忽略。
- 常见误用：
ref.current.innerHTML = '<span>test</span>'—— 在 Taro 小程序里无效果，在 React Native 里直接报错 - 正确做法：用框架的 JSX/模板语法声明结构，动态内容通过 state 驱动重渲染，而不是手动拼 HTML 字符串
- 性能陷阱：试图用字符串模板 + 正则替换模拟 DOM 操作，会导致 diff 失效、内存泄漏、白屏风险升高
样式映射不是 CSSOM → 原生样式表，而是属性直译
跨端框架不解析 CSSOM，也不构建样式计算树。它们把 className 或 style 对象里的键值，按预设规则翻译成平台原生属性。比如 display: 'flex' → flexDirection: 'row'，margin: '10px' → margin: 10（单位自动剥离）。
立即学习“前端免费学习笔记（深入）”；
- 兼容性断层：CSS Grid 在多数跨端平台不支持，
grid-template-columns会被忽略或降级为 flex 布局 - 伪类失效：
:hover、::before这类依赖浏览器渲染引擎的特性，无法映射到原生视图系统 - 单位处理差异：
rem依赖根字体大小，但小程序和 App 端通常只认px或无单位数值，需提前转换
DOM 事件监听必须转为框架生命周期钩子
你不能对跨端组件节点调用 addEventListener，因为那不是 DOM 元素，而是框架封装后的视图描述对象。比如 ref.current.addEventListener('click', handler) 在 React Native 中会报 addEventListener is not a function。
- 正确路径：用组件 props 绑定事件，如
<Button onClick={handler}>，框架内部会将其转为原生onPress或tap - 自定义事件要走通信桥：原生模块发事件，前端用
useEffect+addNativeEventListener（Taro）或NativeModules（RN）接收 - 注意事件冒泡：Web 的冒泡机制在跨端中基本不存在，父子组件通信必须显式通过 props 或 context
真正容易被忽略的，是开发时环境与运行时环境的 DOM “幻觉”——你在 Chrome DevTools 里看到的元素结构，和真机上原生渲染树之间，没有一一对应关系。调试时盯着 Elements 面板改 class，不如直接看框架生成的原生组件树（如 React DevTools 的 Components 标签页、Taro 的调试面板）。映射不是还原，而是契约式翻译；转换不是复制，而是语义重表达。
