元件介绍

Infinite scroll 能在面对多笔资料时，让卷轴滑动到底部时再载入下一页面的资料。

由於一次性向後端取得大批的资料，对於後端的资料计算、资料透过网路传输、页面的渲染，在效能上都有可能会有影响，因此将资料分批载入也有助於网页效能的优化。

另一个分批载入常见的做法是使用 Pagination，分页载入，虽然都是分批载入，但是使用情境有一些区别， Infinite scroll 的优点是一直往下滑就会自动有资料载入，操作效率较流畅，但缺点是难以回去找刚刚看过的东西。所以如果网页内容是希望让使用者能够有效率地找寻特定资讯时，这时选择 Pagination 会比 Infinite scroll 较为适合。

参考设计 & 属性分析

Infinite scroll 的特点是让资料滚到底部时自动载入，所以这边的关键是，我们要如何判断「是否已经滚动到底部」？

从上图可以知道，Element.scrollHeight 表示元件的可滚动范围；Element.scrollTop 指的是元素被向上滚动的高度，换句话说就是你已经走过的距离；最後 Element.clientHeight 就是指元素内部高度，也就是滚动可视范围的高度。

Element.scrollTop + Element.clientHeight >= Element.scrollHeight

所以「滚动到底部」换句话来说，就是你滚过的距离加上自己元素的高度，大於等於可滚动范围的高度。

介面设计

元件实作

以下是我们想像当中的 InfiniteScroll，在元件的 children 当中就是被浏览的内容，所以被 InfiniteScroll 包起来的内容我们希望被不断的载入。

因为他是一个可被滑动的范围，所以这个容器需要被限制高度，内容超出这个高度才有办法被 scroll。

再来我们需要在滑动到底部的时候触发事件，例如需要去打某支 API 来载入资料，因此我们提供一个 onScrollBottom 的 callback。

然後我们在打 API 的时候，是一个非同步行为，会有载入中的状态，因此也有一个 isLoading 的 Boolean props：

<InfiniteScroll
  height={250}
  isLoading={isLoading}
  onScrollBottom={() => {}}
>
  {...}
</InfiniteScroll>

如下程序码所示，我们需要透过 useRef 让我们能够操作这个容器的 DOM，因为我们需要计算何时滑动到底部：

const infiniteScrollRef = useRef();

<InfiniteScrollWrapper
  ref={infiniteScrollRef}
  $height={height}
  onScroll={handleOnScroll}
>
  {children}
  {isLoading && <Loading />}
</InfiniteScrollWrapper>

前面分析我们也已经介绍过如何判断滑动到底部的方法，因此在 onScroll 的时候，我们需要去触发这个计算：

const handleOnScroll = () => {
  const containerElem = infiniteScrollRef.current;
  if (containerElem) {
    const scrollPos = containerElem.scrollTop + containerElem.clientHeight;
    const divHeight = containerElem.scrollHeight;
    
    // 滚过的距离加上自己元素的高度，大於等於可滚动范围的高度
    if ((scrollPos >= divHeight) && onScrollBottom) {
      onScrollBottom();
    }
  }
};

这样我们简单的 InfiniteScroll 就搞定了！
我们展示一下成果：

从上图来看，当我们滑动到底部的时候，就会去触发 GET api 来取得下一页的资料，并且将资料更新到画面上。

我使用的方式是，在 onScrollBottom 被呼叫的时候，表示他滑到底部了，所以我要取得下一页的资料，因此我透过 setPage 这个 useState 将 page + 1：

const [page, setPage] = useState(1);

<InfiniteScroll
  height={250}
  isLoading={isLoading}
  onScrollBottom={() => {
    if (!isLoading) {
      setPage((prev) => prev + 1);
    }
  }}
>
  {
    dataSource.map(({ id, author, download_url }) => (
      <ListItem
        key={id}
        author={author}
        url={download_url}
      />
    ))
  }
</InfiniteScroll>

当 page 这个 state 被改变的时候，我就要去打 API 来载入资料，所以我这便是透过 useEffect 来实作，并且他的 comparison array 里面就放了 page，表示 page 被改变的时候，需要执行里面的内容：

useEffect(() => {
  setSideEffect({
    ...defaultSideEffect,
    isLoading: true,
  });

  fetch(`https://picsum.photos/v2/list?page=${page}&limit=${limit}`, {})
  .then((response) => {
     setSideEffect({
       ...defaultSideEffect,
       isLoaded: true,
     });
     return response.json();
		})
    .then((jsonData) => {
      setDataSource((prev) => [...prev, ...jsonData]);
    }).catch((error) => {
      setSideEffect({
        ...defaultSideEffect,
        error,
      });
    });
}, [page]);

InfiniteScroll 元件原始码：
Source code

Storybook：
InfiniteScroll

参考

https://codesandbox.io/s/yk7637p62z?file=/src/index.js

https://github.com/TimingJL/github-repos-search/blob/master/src/containers/MainPage/MainContent/index.tsx