Open yuxino opened 3 years ago
先从官网的Example研究。
Elements of equal height
例子里示意了这是包含了 100000 条元素的渲染。每一个的高度是50，所以wrapper的高度会是5e06。
当前页面只需要显示10条，所以外容器的高度会是 500。真正的DOM只渲染 10 个DOM。所有的元素的位置都是绝对定位。
都是通过 top 和 left 控制的。
由此大概可以推测出这个场景的优化是跟滚动条密切相关的。但是随之而来也会有一些需要思考的问题这么做会导致什么问题。
Variable heights
第二种类型能够解决第一种提到的第一个问题。但是仍然存在交互的问题，不是长列表，他是长什么样子的。。
这次的高度计算方式说他是动态吧好像也不是。。。因为每个元素虽然高度不一样，但是看起来都是可确定的，现实世界反而是那种不可确定的更多，或者说我们要做长列表优化必须要把高度限制下来才能做么，带着这个问题我准备开始我的第一个实验。
先把项目克隆下来，可是有点阴间，跑不起来，因为环境问题，我只好开了个镜像 docker run -it -v $PWD:app -w /app node bash。
docker run -it -v $PWD:app -w /app node bash
看这个示例，基本可以断言连高度都得用户自己去想，这个库说不上非常舒服，我们必须被迫去适应库本身，定固定的高度去展示每一条数据，不过在大多数场景下，这个做法应该都是可以接受的。
为了证明是不是我对这个库有偏见，于是我去看了一下另一个热门库react-virtualized，发现也是基本一样的，确实是我对这个库有一点偏见了，看来要做长列表优化还是得牺牲一些东西的。
除此之外还加入了一些 feature， 但都不算是我的关注点，比如吸附布局，让一些条目固定的显示，这些感觉都算是比较好实现的。最核心的还是滚动的原理。不过这些相关的部分也是会看看的，毕竟跟代码也是息息相关的。
大的测试单元块有如下:
SizeAndPositionManager.test:
SizeAndPositionManager.test
这个模块看起来是最重要的模块，包含的测试是最多的。
目前这俩模块看起来还是不够清晰，SizeAndPositionManager负责的职能较多已经超出了它的名字了(getVisibleRange和getVisibleRange)，因为比较重要我打算先看这个文件先。
SizeAndPositionManager
getVisibleRange
2020年12月31日16:42:00 确实不能动态算高度是反人类的事情。。但是可以通过高阶组件办到这件事情，这个算法并不在 react-tiny-virtual-list里，需要通过react-virtualized-auto-sizer做到这点，后面会解析react-virtualized-auto-sizer的源码。
react-tiny-virtual-list
react-virtualized-auto-sizer
话说还发现了vue版本的感觉也不错。
vue
又查了一下发现作者是个狠人。
原来react-sortable-hoc也是他写的，有空会去研究一下的。
react-sortable-hoc
先从官网的Example研究。
第一种
Elements of equal height。等高元素。例子里示意了这是包含了 100000 条元素的渲染。每一个的高度是50，所以wrapper的高度会是5e06。
当前页面只需要显示10条，所以外容器的高度会是 500。真正的DOM只渲染 10 个DOM。所有的元素的位置都是绝对定位。
都是通过 top 和 left 控制的。
由此大概可以推测出这个场景的优化是跟滚动条密切相关的。但是随之而来也会有一些需要思考的问题这么做会导致什么问题。
第二种
Variable heights。 动态高度元素。第二种类型能够解决第一种提到的第一个问题。但是仍然存在交互的问题，不是长列表，他是长什么样子的。。
这次的高度计算方式说他是动态吧好像也不是。。。因为每个元素虽然高度不一样，但是看起来都是可确定的，现实世界反而是那种不可确定的更多，或者说我们要做长列表优化必须要把高度限制下来才能做么，带着这个问题我准备开始我的第一个实验。
先把项目克隆下来，可是有点阴间，跑不起来，因为环境问题，我只好开了个镜像
docker run -it -v $PWD:app -w /app node bash。先熟悉一下文档
看这个示例，基本可以断言连高度都得用户自己去想，这个库说不上非常舒服，我们必须被迫去适应库本身，定固定的高度去展示每一条数据，不过在大多数场景下，这个做法应该都是可以接受的。
为了证明是不是我对这个库有偏见，于是我去看了一下另一个热门库react-virtualized，发现也是基本一样的，确实是我对这个库有一点偏见了，看来要做长列表优化还是得牺牲一些东西的。
除此之外还加入了一些 feature， 但都不算是我的关注点，比如吸附布局，让一些条目固定的显示，这些感觉都算是比较好实现的。最核心的还是滚动的原理。不过这些相关的部分也是会看看的，毕竟跟代码也是息息相关的。
从单元测试分析项目主要功能点
大的测试单元块有如下:
SizeAndPositionManager.test:这个模块看起来是最重要的模块，包含的测试是最多的。
目前这俩模块看起来还是不够清晰，
SizeAndPositionManager负责的职能较多已经超出了它的名字了(getVisibleRange和getVisibleRange)，因为比较重要我打算先看这个文件先。更新
2020年12月31日16:42:00 确实不能动态算高度是反人类的事情。。但是可以通过高阶组件办到这件事情，这个算法并不在
react-tiny-virtual-list里，需要通过react-virtualized-auto-sizer做到这点，后面会解析react-virtualized-auto-sizer的源码。话说还发现了
vue版本的感觉也不错。又查了一下发现作者是个狠人。
原来
react-sortable-hoc也是他写的，有空会去研究一下的。