ReScript Playground 布局切换与分隔条拖拽问题解析

在 ReScript 语言官网的 Playground 功能中，开发者发现了一个有趣的交互问题：当窗口大小改变导致布局在行(Row)和列(Column)之间切换时，代码分隔条的拖拽行为不能正确适应新的布局方向。

问题现象

Playground 设计为响应式界面，当窗口宽度足够时采用水平布局（代码和预览左右排列），窗口变窄时自动切换为垂直布局（上下排列）。然而，在布局切换后，用户拖拽分隔条时，界面元素的尺寸调整仍然按照切换前的布局方向进行计算，导致不协调的视觉效果。

技术分析

这个问题的根源在于 React 的 hooks 使用方式。原始实现中，分隔条拖拽逻辑的 useEffect 钩子没有将布局状态(layout)包含在其依赖数组中。这意味着：

1. 当布局从行变为列（或反之）时，拖拽逻辑仍然使用初始捕获的布局值
2. 拖拽计算继续基于旧的布局方向（水平或垂直）
3. 导致尺寸调整方向与当前实际布局不匹配

解决方案

项目维护者采用了最直接的修复方式——将 layout 状态添加到 useEffect 的依赖数组中。这种方案：

1. 确保每次布局变化时都会重新创建拖拽逻辑
2. 新的拖拽逻辑能够获取到最新的布局状态
3. 使得尺寸计算始终与当前布局方向保持一致

相比使用 ref 存储最新值的方案，直接添加依赖项更为简洁，也更符合 React 的设计理念。这种方案虽然会导致 effect 在布局变化时重新运行，但在这个特定场景下性能开销可以忽略不计。

技术启示

这个案例展示了 React 效应依赖管理的重要性，特别是在涉及响应式设计的场景中。开发者需要注意：

1. 所有 effect 内部使用的状态都应该显式声明在依赖数组中
2. 当逻辑需要响应多种状态变化时，确保所有相关状态都被包含
3. 在性能敏感的场合，可以考虑使用 ref 优化，但应优先保证正确性

ReScript Playground 的这个修复体现了 React 最佳实践，确保了界面交互的一致性和可预测性，为用户提供了更流畅的编码体验。