react的下拉加载更多

业务背景

常常会有这样的业务场景。下拉加载更多。之前我手写过一个方案，但是后来发现github上已经有现成的库react-infinite-scroll-component了(之前手写的时候，关键词没有搜对，所以没有找到现成的库。哈哈哈哈）。于是看一下它的源码，对比一下我之前的实现。

我的方案

在了解下拉加载更多这个功能之前，需要搞清楚clientHeight, scrollTop以及scrollHeight 三个概念。
可以看这篇文章
下拉加载更多的方案就是，当满足如下公式时，去请求资源

 target.scrollTop + target.clientHeight = target.scrollHeight

具体方案就是：
在某个元素上绑定scroll监听事件，调用load函数。做得更精细点，当上一次load请求没有产生任何数据，那么下一次不再请求。

function handleScroll(event) {
let isToBottom = event.target.scrollTop +   event.target.clientHeight  -  event.target.scrollHeight === 0

 if (isToBottom && hasMore) {
         load()
   }
}
element.addEventListener('scroll', this.handleScroll)

源码解析

我看了一下react-infinite-scroll-component的源码，发现原理都是一样的。只不过别人处理得更精细一点

精细点1

在调用监听函数时，有一个固定时间的延迟，为了防止多次监听函数

this.throttledOnScrollListener = throttle(this.onScrollListener, 150).bind(
      this
);
 this.el.addEventListener("scroll", this.throttledOnScrollListener);

精细点2

在算何时触发调用load函数时，它的公式和我不一样，如下所示

let isToBottom = event.target.scrollTop +   event.target.clientHeight  -  event.target.scrollHeight * percent === 0

也就是说，它有一个percent的乘积累积上去。之所以这样做的原因是：

image.png

这个库做得更好一点，用的百分比而不是固定数值。

后记

当然，这个库还有上拉刷新的功能，这里就不研究啦

参考文档：
https://segmentfault.com/a/1190000016197930
https://segmentfault.com/q/1010000003795357