Ant Design Splitter 组件 lazy 模式下的尺寸回调问题解析

问题背景

在使用 Ant Design 的 Splitter 组件时，开发者发现当开启 lazy 属性后，onResize 和 onResizeEnd 回调的行为出现了异常。具体表现为：

1. onResize 回调在拖动过程中只触发一次
2. onResizeEnd 回调返回的尺寸是上一次的尺寸值，而非当前最新尺寸

技术分析

Splitter 组件的工作机制

Splitter 组件用于创建可调整大小的面板布局，主要包含以下核心功能：

1. 实时调整：默认模式下，面板尺寸会随着用户拖动实时变化
2. 延迟渲染（lazy 模式）：当设置 lazy 属性时，面板只在拖动结束时才更新实际尺寸

回调函数的预期行为

按照设计原则，无论是否开启 lazy 模式，回调函数的行为应该保持一致：

1. onResize：在尺寸变化过程中持续触发
2. onResizeEnd：在调整结束时触发，并提供最终确定的尺寸值

当前实现的问题

在 lazy 模式下，当前实现存在以下问题：

1. onResize 触发不足：由于 lazy 模式下面板不实时更新，导致回调也被限制
2. onResizeEnd 数据滞后：返回的是调整前的尺寸而非最新尺寸

解决方案建议

临时解决方案

开发者可以暂时通过以下方式获取正确尺寸：

1. 同时监听 onResize 和 onResizeEnd
2. 从 onResize 回调中获取最新尺寸值

长期修复方案

从技术实现角度，建议进行以下修复：

1. 分离回调与渲染逻辑：即使 lazy 模式下不实时渲染，也应保持回调的完整性
2. 确保数据一致性：onResizeEnd 必须返回最终确认的尺寸值
3. 优化事件处理流程：在拖动过程中维护正确的尺寸状态

最佳实践

在使用 Splitter 组件时，建议：

1. 如果需要实时获取尺寸变化，避免使用 lazy 模式
2. 在 lazy 模式下，注意验证回调数据的准确性
3. 对于关键业务逻辑，考虑添加额外的尺寸验证机制

总结

Ant Design 的 Splitter 组件在 lazy 模式下的回调行为存在不一致问题，这可能会影响依赖尺寸回调的业务逻辑。虽然目前可以通过变通方法获取正确尺寸，但长期来看需要从框架层面进行修复，以确保组件行为的可预测性和一致性。