可能是最快的前端下拉刷新组件
source link: https://zhuanlan.zhihu.com/p/163839098
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
可能是最快的前端下拉刷新组件
最近开源了一个下拉刷新和上拉加载更多的组件，react-fast-scroll，听名字就就知道是基于react的组件，可能是react最快的下拉刷新组件。这个组件也支持Vue，Angular，原生JS等框架，需要扩展。
项目基本完成，现在缺Demo展示，测试用例，这些逐步完善。如果有同学敢兴趣，欢迎 PR 和使用。
https://github.com/carrollcai/react-fast-scrollgithub.com简单分析一下下拉组件
我去年用过 better-scroll，也用过react的虚拟列表 react-virtualized，两者都是非常好的滚动组件，支持的功能也非常多。但是在列表数据较多，或者滑动较快，并没有原生滚动表现好。
better-scroll 使用 transform 模拟滚动行为，但是在滚动的时候会一直触发重排，好像是要获取DOM的一些属性才能计算，而且无法规避，所以大列表的情况下，掉帧比较厉害。
react-virtualized 创建一个固定的滚动区域，只需要可视的数据，减少了组件渲染，重排重绘时间，并且减少了DOM的节点。但是缺点也很明显，滚动稍微快一点就会出现空白。
react-fast-scroll 是基于原生 scroll 事件，并且支持将滚动事件绑定到 window 上，这样可以减少事件捕获和冒泡时间，并且 window 上的滚动事件，浏览器是有优化机制的。原生 scroll 还可以开启 passive: true，避免浏览器监听 scroll 拦截事件（e.preventDefault），也有 10% - 20% 的优化。对于长列表并且有大量图片，可以通过监听 IntersectionObserver api（异步api），当图片离开可视区，移除DOM，这样绘制整个列表的时候，合成的压力会小非常多。对于列表无限增长的问题，可以采用数据切割的方式，数据保留在内存中，DOM移除，比如当加载到1000条数据时，清除前200条数据，滚回去的时候再还原，但是这个过程必须是同步的，否则会因为滚动过快，导致数据未还原，这个理念和 react-virtualized 相似。
下面是 IntersectionObserver 的介绍。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK