问题描述
react-window 是一个用于高效呈现大型列表和表格数据的 React 库 但是这个库本身并不直接支持固定表格行列 如果在使用 react-window 的时候存在固定行列需求，我们只能自己完成封装
固定行列虚拟 table 效果类似于这样：
实现原理 - 官方 demos & issues
如果要了解在 react-window 中如何实现固定头列(sticky 布局)，可以阅读下面资料：
Does this library support "sticky" items?
Fixed grid headers with CSS position sticky #166
需求描述
- 基于 react-window 实现一个 table 的功能
- 该 table 能够实现4 个方向上(top, right, bottom, left) 固定行列(通过参数控制)
实现
9 区块的图示
table 的场景下，如果需要实现 4 个方向上(top, right, bottom, left)的 sticky 布局，那么展示应该如下图所示
区域说明：
[1, 2, 3, 4]: z-index 为最大值的区域，该区域不会随着滚动而发生内容的变化
[5, 6, 7, 8]: z-index 处于中间值的区域，5,7 不会随着 x 轴的滚动而发变化；6,8 不会随着 y 轴的滚动而发生变化
[content]: z-index 为最小值的区域，是 table 的非 sticky 区域
9 区块的 html 实现
这种多区块布局 + sticky 布局，直接封装组件很容易出现问题，所以这里我们先使用 html + css 完成最基础的布局，然后才进行组件的开发
页面效果：
组件的封装
封装思路：计算 [1, 2, 3, 4, 5, 6, 7, 8, content] 所有容器的需要展示的元素，然后将这些元素塞入到预定好的 DOM 中
封装难点：8 个 sticky 元素的 css 布局实现起来比较麻烦
组件的代码和文档可以参照下面两个链接:
code - ReactWindowStickyCells 组件代码
如果需要理解组件的具体实现，推荐先看完参考资料，理解 react-window 的基本原理
如果想要弄清楚实现细节，这里可以看下组件的实现细节，代码阅读难度不高，这里最难的地方其实这个 css 布局的处理