react-split-pane双窗格问题：剩余空间适配与卡顿优化

我之前在项目里用react-split-pane做上下拆分时也踩过这两个坑，结合实际调试经验，给你整理了针对性的解决方案：

你遇到的问题本质是SplitPane没有正确继承父容器的高度，且底部窗格没有设置自动填充规则。按下面的步骤调整：

1. 给SplitPane的父容器设置明确高度：不管是固定像素（比如1000px）还是视口高度（100vh），必须让SplitPane有明确的高度参考。
2. 配置SplitPane的核心属性：设置split="horizontal"（表示上下拆分），并让SplitPane的高度继承父容器（style={{ height: '100%' }}）。
3. 底部窗格设置自动填充：给底部窗格添加flex: 1样式，同时开启overflow: auto避免内容溢出时撑破布局。

示例代码：

import SplitPane from 'react-split-pane';

// 父容器定义总高度
<div style={{ height: '1000px', width: '100%' }}>
  <SplitPane
    split="horizontal"
    defaultSize={300} // 顶部窗格初始高度
    style={{ height: '100%' }}
  >
    {/* 顶部窗格：按需设置overflow，避免内容过长时滚动 */}
    <div style={{ overflow: 'auto' }}>
      <YourTopNestedTable />
    </div>
    {/* 底部窗格：flex:1 自动填充剩余空间 */}
    <div style={{ flex: 1, overflow: 'auto' }}>
      <YourBottomNestedTable />
    </div>
  </SplitPane>
</div>

原理：SplitPane会基于自身高度计算上下窗格的分配比例，底部窗格的flex:1会强制它占据顶部窗格之外的所有剩余空间，完美适配你的需求。

沙箱里不明显但项目中卡顿，大概率是拖动时触发了大量组件重渲染，或者react-split-pane本身的事件监听机制在复杂DOM下性能不足。可以从这两个方向优化：

1. 优化表格组件的重渲染 #

如果你的表格组件（尤其是嵌套包裹的）没有做性能优化，拖动SplitPane时的每一次尺寸变化都会触发表格的全量重渲染，导致卡顿。解决方法：

• 用React.memo包裹表格组件，避免不必要的重渲染：

  const MemoizedTable = React.memo(YourTableComponent);
  

• 如果你用的是Ant Design等UI库的Table组件，开启虚拟滚动（比如Antd Table的virtual属性），减少DOM节点数量；同时确保设置了唯一的rowKey，避免渲染混乱。
• 拖动过程中暂时禁用表格的某些重逻辑：比如在SplitPane的onDragStart事件中给表格添加一个isDragging状态，让表格暂时不执行复杂计算，onDragEnd时再恢复。

2. 替换为性能更优的拆分库 #

react-split-pane的部分版本基于旧的事件监听机制，在复杂项目中容易出现卡顿。推荐使用react-resizable-panels，这个库基于现代的ResizeObserver API，拖动性能更流畅，API也更简洁，默认支持自适应剩余空间。

示例代码：

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

<div style={{ height: '1000px', width: '100%' }}>
  <PanelGroup direction="vertical">
    {/* 顶部窗格：可以用百分比或像素设置初始尺寸 */}
    <Panel defaultSize={30}> {/* 30%高度 */}
      <YourTopNestedTable />
    </Panel>
    {/* 拖动手柄 */}
    <PanelResizeHandle />
    {/* 底部窗格：自动填充剩余空间，无需额外样式 */}
    <Panel>
      <YourBottomNestedTable />
    </Panel>
  </PanelGroup>
</div>

这个库的拖动逻辑更轻量化，不会频繁触发全局重绘，在复杂项目中卡顿问题会明显改善。

内容的提问来源于stack exchange，提问作者Adam