90行代碼，15個元素實現無限滾動

前言

在本篇文章你將會學到：

• IntersectionObserver API 的用法，以及如何兼容。
• 如何在React Hook中實現無限滾動。
• 如何正確渲染多達10000個元素的列表。

  

  無限下拉加載技術使用戶在大量成塊的內容面前一直滾動查看。這種方法是在你向下滾動的時候不斷加載新內容。

當你使用滾動做爲發現數據的主要方法時，它可能使你的用戶在網頁上停留更長時間並提高用戶參與度。隨着社交媒體的流行，大量的數據被用戶消費。無線滾動提供了一個高效的方法讓用戶瀏覽海量信息，而沒必要等待頁面的預加載。

如何構建一個體驗良好的無限滾動，是每一個前端不管是項目或面試都會碰到的一個課題。

本文的原版實現來自：Creating Infinite Scroll with 15 Elements

1. 早期的解決方案

關於無限滾動，早期的解決方案基本都是依賴監聽scroll事件：

function fetchData() {
  fetch(path).then(res => doSomeThing(res.data));
}

window.addEventListener('scroll', fetchData);
複製代碼

而後計算各類.scrollTop()、.offset().top等等。

手寫一個也是很是枯燥。並且：

• scroll事件會頻繁觸發，所以咱們還須要手動節流。
• 滾動元素內有大量DOM，容易形成卡頓。

後來出現交叉觀察者 IntersectionObserver API ，在與 Vue、 React這類數據驅動視圖的框架後，無限滾動的通用方案就出來了。

2. 交叉觀察者：IntersectionObserver

const box = document.querySelector('.box');
const intersectionObserver = new IntersectionObserver((entries) => {
  entries.forEach((item) => {
    if (item.isIntersecting) {
      console.log('進入可視區域');
    }
  })
});
intersectionObserver.observe(box);
複製代碼

敲重點： IntersectionObserver API是異步的，不隨着目標元素的滾動同步觸發，性能消耗極低。

2.1 IntersectionObserverEntry對象

這裏我就粗略的介紹下須要用到的：

IntersectionObserverEntry對象

callback函數被調用時，會傳給它一個數組，這個數組裏的每一個對象就是當前進入可視區域或者離開可視區域的對象(IntersectionObserverEntry對象)

這個對象有不少屬性，其中最經常使用的屬性是：

• target: 被觀察的目標元素，是一個 DOM 節點對象
• isIntersecting: 是否進入可視區域
• intersectionRatio: 相交區域和目標元素的比例值，進入可視區域，值大於0，不然等於0

2.3 options

調用IntersectionObserver時，除了傳一個回調函數，還能夠傳入一個option對象，配置以下屬性：

• threshold: 決定了何時觸發回調函數。它是一個數組，每一個成員都是一個門檻值，默認爲[0]，即交叉比例（intersectionRatio）達到0時觸發回調函數。用戶能夠自定義這個數組。好比，[0, 0.25, 0.5, 0.75, 1]就表示當目標元素 0%、25%、50%、75%、100% 可見時，會觸發回調函數。
• root: 用於觀察的根元素，默認是瀏覽器的視口，也能夠指定具體元素，指定元素的時候用於觀察的元素必須是指定元素的子元素
• rootMargin: 用來擴大或者縮小視窗的的大小，使用css的定義方法，10px 10px 30px 20px表示top、right、bottom 和 left的值

const io = new IntersectionObserver((entries) => {
  console.log(entries);
}, {
  threshold: [0, 0.5],
  root: document.querySelector('.container'),
  rootMargin: "10px 10px 30px 20px",
});
複製代碼

2.4 observer

observer.observer（nodeone）; //僅觀察nodeOne 
observer.observer（nodeTwo）; //觀察nodeOne和nodeTwo 
observer.unobserve（nodeOne）; //中止觀察nodeOne
observer.disconnect（）; //沒有觀察任何節點
複製代碼

3. 如何在React Hook中使用IntersectionObserver

在看Hooks版以前，來看正常組件版的：

class SlidingWindowScroll extends React.Component {
this.$bottomElement = React.createRef();
...
componentDidMount() {
    this.intiateScrollObserver();
}
intiateScrollObserver = () => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
    };
    this.observer = new IntersectionObserver(this.callback, options);
    this.observer.observe(this.$bottomElement.current);
}
render() {
    return (
    <li className='img' ref={this.$bottomElement}>
    )
}
複製代碼

衆所周知，React 16.x後推出了useRef來替代原有的createRef，用於追蹤DOM節點。那讓咱們開始吧：

4. 原理

實現一個組件，能夠顯示具備15個元素的固定窗口大小的n個項目的列表： 即在任什麼時候候，無限滾動n元素上也僅存在15個DOM節點。

• 採用relative/absolute 定位來肯定滾動位置
• 追蹤兩個ref: top/bottom來決定向上/向下滾動的渲染與否
• 切割數據列表，保留最多15個DOM元素。

5. useState聲明狀態變量

咱們開始編寫組件SlidingWindowScrollHook:

const THRESHOLD = 15;
const SlidingWindowScrollHook = (props) =>  {
  const [start, setStart] = useState(0);
  const [end, setEnd] = useState(THRESHOLD);
  const [observer, setObserver] = useState(null);
  // 其它代碼...
}
複製代碼

1. useState的簡單理解:

const [屬性, 操做屬性的方法] = useState(默認值);
複製代碼

2. 變量解析

• start：當前渲染的列表第一個數據，默認爲0
• end: 當前渲染的列表最後一個數據，默認爲15
• observer: 當前觀察的視圖ref元素

6. useRef定義追蹤的DOM元素

const $bottomElement = useRef();
const $topElement = useRef();
複製代碼

正常的無限向下滾動只需關注一個dom元素，但因爲咱們是固定15個dom元素渲染，須要判斷向上或向下滾動。

7. 內部操做方法和和對應useEffect

請配合註釋食用：

useEffect(() => {
    // 定義觀察
    intiateScrollObserver();
    return () => {
      // 放棄觀察
      resetObservation()
  }
},[end]) //由於[end] 是同步刷新，這裏用一個就好了。

// 定義觀察
const intiateScrollObserver = () => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
    };
    const Observer = new IntersectionObserver(callback, options)
    // 分別觀察開頭和結尾的元素
    if ($topElement.current) {
      Observer.observe($topElement.current);
    }
    if ($bottomElement.current) {
      Observer.observe($bottomElement.current);
    }
    // 設初始值
    setObserver(Observer)    
}

// 交叉觀察的具體回調，觀察每一個節點，並對實時頭尾元素索引處理
const callback = (entries, observer) => {
    entries.forEach((entry, index) => {
      const listLength = props.list.length;
      // 向下滾動，刷新數據
      if (entry.isIntersecting && entry.target.id === "bottom") {
        const maxStartIndex = listLength - 1 - THRESHOLD;     // 當前頭部的索引
        const maxEndIndex = listLength - 1;                   // 當前尾部的索引
        const newEnd = (end + 10) <= maxEndIndex ? end + 10 : maxEndIndex; // 下一輪增長尾部
        const newStart = (end - 5) <= maxStartIndex ? end - 5 : maxStartIndex; // 在上一輪的基礎上計算頭部
        setStart(newStart)
        setEnd(newEnd)
      }
      // 向上滾動，刷新數據
      if (entry.isIntersecting && entry.target.id === "top") {
        const newEnd = end === THRESHOLD ? THRESHOLD : (end - 10 > THRESHOLD ? end - 10 : THRESHOLD); // 向上滾動尾部元素索引不得小於15
        let newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0); // 頭部元素索引最小值爲0
        setStart(newStart)
        setEnd(newEnd)
        }
    });
}

// 中止滾動時放棄觀察
const resetObservation = () => {
    observer && observer.unobserve($bottomElement.current); 
    observer && observer.unobserve($topElement.current);
}

// 渲染時，頭尾ref處理
const getReference = (index, isLastIndex) => {
    if (index === 0)
      return $topElement;
    if (isLastIndex) 
      return $bottomElement;
    return null;
}
複製代碼

8. 渲染界面

const {list, height} = props; // 數據，節點高度
  const updatedList = list.slice(start, end); // 數據切割
  
  const lastIndex = updatedList.length - 1;
  return (
    <ul style={{position: 'relative'}}>
      {updatedList.map((item, index) => {
        const top = (height * (index + start)) + 'px'; // 基於相對 & 絕對定位 計算
        const refVal = getReference(index, index === lastIndex); // map循環中賦予頭尾ref
        const id = index === 0 ? 'top' : (index === lastIndex ? 'bottom' : ''); // 綁ID
        return (<li className="li-card" key={item.key} style={{top}} ref={refVal} id={id}>{item.value}</li>);
      })}
    </ul>
  );
複製代碼

9. 如何使用

App.js:

import React from 'react';
import './App.css';
import { SlidingWindowScrollHook } from "./SlidingWindowScrollHook";
import MY_ENDLESS_LIST from './Constants';

function App() {
  return (
    <div className="App">
     <h1>15個元素實現無限滾動</h1>
      <SlidingWindowScrollHook list={MY_ENDLESS_LIST} height={195}/>
    </div>
  );
}

export default App;
複製代碼

定義一下數據 Constants.js:

const MY_ENDLESS_LIST = [
  {
    key: 1,
    value: 'A'
  },
  {
    key: 2,
    value: 'B'
  },
  {
    key: 3,
    value: 'C'
  },
  // 中間就不貼了...
  {
    key: 45,
    value: 'AS'
  }
]
複製代碼

SlidingWindowScrollHook.js:

import React, { useState, useEffect, useRef } from "react";
const THRESHOLD = 15;

const SlidingWindowScrollHook = (props) =>  {
  const [start, setStart] = useState(0);
  const [end, setEnd] = useState(THRESHOLD);
  const [observer, setObserver] = useState(null);
  const $bottomElement = useRef();
  const $topElement = useRef();

  useEffect(() => {
    intiateScrollObserver();
    return () => {
      resetObservation()
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[start, end])

  const intiateScrollObserver = () => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
    };
    const Observer = new IntersectionObserver(callback, options)
    if ($topElement.current) {
      Observer.observe($topElement.current);
    }
    if ($bottomElement.current) {
      Observer.observe($bottomElement.current);
    }
    setObserver(Observer)    
  }

  const callback = (entries, observer) => {
    entries.forEach((entry, index) => {
      const listLength = props.list.length;
      // Scroll Down
      if (entry.isIntersecting && entry.target.id === "bottom") {
        const maxStartIndex = listLength - 1 - THRESHOLD;     // Maximum index value `start` can take
        const maxEndIndex = listLength - 1;                   // Maximum index value `end` can take
        const newEnd = (end + 10) <= maxEndIndex ? end + 10 : maxEndIndex;
        const newStart = (end - 5) <= maxStartIndex ? end - 5 : maxStartIndex;
        setStart(newStart)
        setEnd(newEnd)
      }
      // Scroll up
      if (entry.isIntersecting && entry.target.id === "top") {
        const newEnd = end === THRESHOLD ? THRESHOLD : (end - 10 > THRESHOLD ? end - 10 : THRESHOLD);
        let newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0);
        setStart(newStart)
        setEnd(newEnd)
      }
      
    });
  }
  const resetObservation = () => {
    observer && observer.unobserve($bottomElement.current);
    observer && observer.unobserve($topElement.current);
  }


  const getReference = (index, isLastIndex) => {
    if (index === 0)
      return $topElement;
    if (isLastIndex) 
      return $bottomElement;
    return null;
  }

  const {list, height} = props;
  const updatedList = list.slice(start, end);
  const lastIndex = updatedList.length - 1;
  
  return (
    <ul style={{position: 'relative'}}>
      {updatedList.map((item, index) => {
        const top = (height * (index + start)) + 'px';
        const refVal = getReference(index, index === lastIndex);
        const id = index === 0 ? 'top' : (index === lastIndex ? 'bottom' : '');
        return (<li className="li-card" key={item.key} style={{top}} ref={refVal} id={id}>{item.value}</li>);
      })}
    </ul>
  );
}
export { SlidingWindowScrollHook };
複製代碼

以及少量樣式：

.li-card {
  display: flex;
  justify-content: center;
  list-style: none;
  box-shadow: 2px 2px 9px 0px #bbb;
  padding: 70px 0;
  margin-bottom: 20px;
  border-radius: 10px;
  position: absolute;
  width: 80%;
}
複製代碼

而後你就能夠慢慢耍了。。。

10. 兼容性處理

IntersectionObserver不兼容Safari?

莫慌，咱們有polyfill版

每週34萬下載量呢，放心用吧臭弟弟們。

項目源地址：github.com/roger-hiro/…

參考文章：

• Creating Infinite Scroll with 15 Elements
• IntersectionObserve初試

❤️ 看完三件事

若是你以爲這篇內容對你挺有啓發，我想邀請你幫我三個小忙：

1. 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
2. 關注公衆號「前端勸退師」，不按期分享原創知識。
3. 也看看其它文章

• 120行代碼實現一個交互完整的拖拽上傳組件
• 160行代碼實現動態炫酷的可視化圖表 - 排行榜
• 「數據可視化庫王者」D3.js 極速上手到Vue應用
• 「真®全棧之路」Web前端開發的後端指南
• 「Vue實踐」5分鐘擼一個Vue CLI 插件
• 「Vue實踐」武裝你的前端項目
• 「中高級前端面試」JavaScript手寫代碼無敵祕籍
• 「從源碼中學習」面試官都不知道的Vue題目答案
• 「從源碼中學習」Vue源碼中的JS騷操做
• 「Vue實踐」項目升級vue-cli3的正確姿式
• 爲什麼你始終理解不了JavaScript做用域鏈？