FAQ

FAQ

基础问题

这个库安全吗？会不会破坏 React？

它依赖 React 的内部属性 __reactFiber$，这不是公开 API。所以：

• React 小版本升级（18.2 → 18.3）：安全，内部属性不会变
• React 大版本升级（18 → 19）：需要测试，有可能变
• 当前状态：从 React 16 到 React 18，__reactFiber$ 前缀一直没变

库内有运行时检测——如果找不到 Fiber 属性，会打 warning 而不是静默失败。

和 React Portal 有什么区别？

Portal 让 React 渲染到 另一个 DOM 容器。但改变 Portal 的目标容器会导致子组件 unmount + remount。

这个库是在 React 不知情的情况下搬 DOM。React 的组件树完全不变。

支持 React Server Components 吗？

不支持。这个库的核心操作是客户端 DOM 操作，RSC 里没有 DOM。但在 Client Component 中使用完全没问题。

支持 React Native 吗？

不支持。React Native 没有 DOM。

使用问题

transfer 之后，源容器里的组件还能正常更新吗？

源容器里放了一个 placeholder <div>。React 如果 re-render 了这个组件，它会操作 placeholder 而不是真实元素。大多数情况下这没有影响，因为 React 操作的是"应该在那个位置"的 DOM。

元素在目标容器里能响应事件吗？

能。DOM 事件是绑定在元素上的，跟它在哪个容器里无关。click、mouseover 等事件都正常工作。

可以同时 transfer 多个元素吗？

可以。每次 transferDom() 调用是独立的，互不干扰。

不给 transition 参数会怎样？

瞬间完成，没有动画。元素直接出现在目标容器里。

restore 之后还能再 transfer 吗？

可以。transfer → restore → transfer → restore，来回多少次都行。

兼容性

浏览器兼容性？

用到的 API 全是基础 DOM API（getBoundingClientRect、position: fixed、CSS transition、transitionend 事件），所有现代浏览器都支持，包括：

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

React 版本？

• React 16.8+（需要 Hooks）
• 在 React 18 上测试通过
• React 19 需要验证（__reactFiber$ 前缀是否改变）

原理问题

为什么不用 Node.prototype.moveBefore？

moveBefore 是 Chrome 133（2025 年 2 月）才有的新 API，Safari 和 Firefox 还不支持。等它成为标准并被广泛支持后，这个库可以用它替代 Fiber stateNode hack。

为什么不用 React 19 的 <Activity>？

<Activity> 解决的是"隐藏组件不卸载"的问题，不是"跨容器移动 DOM"的问题。即使有了 <Activity>，你还是没法把一个元素从 A 容器带动画飞到 B 容器。

为什么不直接用 CSS display: none + 在新位置渲染？

display: none 可以防止卸载，但：

1. 两个位置同时存在两个播放器实例，资源浪费
2. 没有过渡动画
3. 对于 <video>，隐藏的实例还在占用解码器

这个库只有一个实例，真正地"搬运"。