React-Resizable-Panels中获取面板初始尺寸的最佳实践

在使用React-Resizable-Panels库时，开发者经常需要获取面板的初始尺寸来进行一些定制化渲染，比如根据面板大小动态调整图标大小。然而，直接通过ref在组件挂载时获取尺寸可能会遇到问题，因为面板的尺寸在首次渲染时可能尚未计算完成。

常见误区

许多开发者会尝试在useEffect钩子中通过ref访问面板尺寸，类似以下代码：

function Component() {
  const ref = useRef(null);
  const [_open, setOpen] = useState(undefined);
  
  useEffect(() => {
    if (_open === undefined) {
      setOpen(!ref.current.isCollapsed());
    }
  }, []);
  
  return <Panel ref={ref} />;
}

这种方法的问题在于，当useEffect首次执行时，面板可能还没有完成尺寸计算，导致获取的尺寸信息不准确或不可用。

推荐解决方案

React-Resizable-Panels提供了更可靠的方式来获取面板尺寸变化，包括初始尺寸。最佳实践是使用Panel组件的onResize回调函数：

function Component() {
  const [panelSize, setPanelSize] = useState(null);

  const handleResize = (size) => {
    setPanelSize(size);
    // 在这里执行基于尺寸的逻辑
  };

  return <Panel onResize={handleResize} />;
}

onResize回调不仅会在用户调整面板大小时触发，还会在组件首次挂载时使用初始尺寸调用一次。这确保了开发者能够可靠地获取面板的初始尺寸。

实现原理

React-Resizable-Panels内部会在面板布局计算完成后触发onResize回调。这个过程是异步的，可能在组件挂载后的某个时间点才完成。因此，直接通过ref同步访问尺寸信息可能获取不到最新值，而onResize回调则能确保在正确的时机获取准确的尺寸数据。

进阶用法

如果需要更精细的控制，可以结合使用ref和onResize：

function Component() {
  const ref = useRef(null);
  const [isInitialized, setIsInitialized] = useState(false);

  const handleResize = (size) => {
    if (!isInitialized) {
      setIsInitialized(true);
      // 执行初始化逻辑
    }
    // 常规尺寸变化处理
  };

  return <Panel ref={ref} onResize={handleResize} />;
}

这种方法既能确保获取初始尺寸，又能跟踪后续的尺寸变化，适用于更复杂的交互场景。

通过使用onResize回调，开发者可以避免直接操作ref带来的时序问题，更可靠地实现基于面板尺寸的动态渲染逻辑。