[源码阅读]通过react-infinite-scroller理解滚动加载要点

react-infinite-scroller就是一个组件，主要逻辑就是addEventListener绑定scroll事件。

看它的源码主要意义不在知道如何使用它，而是知道以后处理滚动加载要注意的东西。

此处跳到 总结。

初识

参数：

// 渲染出来的DOM元素name
element: 'div',
// 是否能继续滚动渲染
hasMore: false,
// 是否在订阅事件的时候执行事件
initialLoad: true,
// 表示当前翻页的值(每渲染一次递增)
pageStart: 0,
// 传递ref，返回此组件渲染的 DOM
ref: null,
// 触发渲染的距离
threshold: 250,
// 是否在window上绑定和处理距离
useWindow: true,
// 是否反向滚动，即到顶端后渲染
isReverse: false,
// 是否使用捕获模式
useCapture: false,
// 渲染前的loading组件
loader: null,
// 自定义滚动组件的父元素
getScrollParent: null,

---

深入

componentDidMount

componentDidMount() {
  this.pageLoaded = this.props.pageStart;
  this.attachScrollListener();
}

执行attachScrollListener

---

attachScrollListener

attachScrollListener() {
  const parentElement = this.getParentElement(this.scrollComponent);
  
  if (!this.props.hasMore || !parentElement) {
    return;
  }

  let scrollEl = window;
  if (this.props.useWindow === false) {
    scrollEl = parentElement;
  }
  scrollEl.addEventListener(
    'mousewheel',
    this.mousewheelListener,
    this.props.useCapture,
  );
  scrollEl.addEventListener(
    'scroll',
    this.scrollListener,
    this.props.useCapture,
  );
  scrollEl.addEventListener(
    'resize'