Floating UI 中回调函数状态更新问题解析

问题背景

在使用 Floating UI 库时，开发者可能会遇到一个常见问题：当组件状态更新后，Floating UI 的回调函数中仍然引用着旧的状态值。这种现象通常发生在使用 React 状态管理并结合 Floating UI 的中间件功能时。

问题表现

具体表现为：

1. 组件内部使用 useState 管理状态
2. 状态值被用在 Floating UI 的回调函数中（如中间件的 apply 方法）
3. 当状态更新后，回调函数中获取的仍然是旧的状态值

问题根源

这个问题源于 Floating UI 对回调函数的处理机制。默认情况下，Floating UI 不会自动跟踪回调函数内部依赖的状态变化。当组件重新渲染时，虽然回调函数被重新创建，但 Floating UI 可能仍然保持着对旧回调函数的引用。

解决方案

Floating UI 提供了两种方式来解决这个问题：

1. 使用 deps 依赖数组

对于中间件函数，可以通过在配置对象中添加 deps 属性来声明依赖项：

size({
  apply({elements}) {
    elements.floating.style.height = `${state}px`;
  },
  deps: [state]  // 声明依赖的状态
})

2. 使用函数式参数（适用于部分中间件）

某些中间件支持以函数形式传入参数，并接受依赖数组：

offset(() => value, [value]);

实现原理

当指定了依赖数组后，Floating UI 会在检测到依赖项变化时重新初始化相关功能。这类似于 React 的 useEffect 依赖机制，确保了回调函数能够获取到最新的状态值。

最佳实践

1. 对于任何使用组件状态或props的中间件回调，都应该显式声明依赖项
2. 保持依赖数组精简，只包含真正影响回调行为的变量
3. 对于复杂逻辑，考虑将回调逻辑提取到单独的函数中

版本注意事项

此功能在以下版本中可用：

• @floating-ui/react-dom 2.1.0+
• @floating-ui/react-native 0.10.6+
• @floating-ui/react 0.26.16+

总结

理解 Floating UI 的这种行为对于构建可靠的悬浮UI组件至关重要。通过正确使用依赖声明机制，开发者可以确保组件状态与UI行为保持同步，避免因状态滞后导致的界面问题。这种模式也体现了React应用中常见的状态管理原则，即在副作用中正确处理依赖关系。