2021-11-17 16:24 Java

关注

90行代码，15个元素实现无限滚动

在本篇文章你将会学到：

IntersectionObserver API 的用法，以及如何兼容。
如何在React Hook中实现无限滚动。
如何正确渲染多达10000个元素的列表。

无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。

当你使用滚动作为发现数据的主要方法时，它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行，大量的数据被用户消费。无线滚动提供了一个高效的方法让用户浏览海量信息，而不必等待页面的预加载。

如何构建一个体验良好的无限滚动，是每个前端无论是项目或面试都会碰到的一个课题。
本文的原版实现来自：Creating Infinite Scroll with 15 Elements

早期的解决方案
关于无限滚动，早期的解决方案基本都是依赖监听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的值

)
}
复制代码众所周知，React 16.x后推出了useRef来替代原有的createRef，用于追踪DOM节点。那让我们开始吧：
4. 原理
实现一个组件，可以显示具有15个元素的固定窗口大小的n个项目的列表：
即在任何时候，无限滚动n元素上也仅存在15个DOM节点。
采用relative/absolute 定位来确定滚动位置
追踪两个ref: top/bottom来决定向上/向下滚动的渲染与否
切割数据列表，保留最多15个DOM元素。
1. 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元素
1. useRef定义追踪的DOM元素
  const $bottomElement = useRef();
  const $topElement = useRef();
  复制代码正常的无限向下滚动只需关注一个dom元素，但由于我们是固定15个dom元素渲染，需要判断向上或向下滚动。
2. 内部操作方法和和对应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 ( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsserver.observe($ topElement.current);
}
if ( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsserver.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( $KaTeX parse error: Expected 'EOF', got '&' at position 39: \dots observer &̲& observer.unob\dots$ 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 (
{item.value}
);
})}

);
复制代码9. 如何使用
App.js:
import React from ‘react’;
import ‘./App.css’;
import { SlidingWindowScrollHook } from “./SlidingWindowScrollHook”;
import MY_ENDLESS_LIST from ‘./Constants’;
function App() {
return (

15个元素实现无限滚动

);
}
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 ( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsserver.observe($ topElement.current);
}
if ( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsserver.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( $KaTeX parse error: Expected 'EOF', got '&' at position 38: \dots; observer &̲& observer.unob\dots$ 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 (
{item.value}

);
})}

);
}
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%;
}
复制代码然后你就可以慢慢耍了。。。

兼容性处理
IntersectionObserver不兼容Safari?
莫慌，我们有polyfill版

每周34万下载量呢，放心用吧臭弟弟们。

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

作者：前端劝退师
链接：https://juejin.im/post/5d7f80796fb9a06b24434d4e
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd>
重做：<kbd>Ctrl/Command</kbd> + <kbd>Y</kbd>
加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
标题：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>
无序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd>
有序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd>
检查列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>
插入代码：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>
插入链接：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
插入图片：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>
查找：<kbd>Ctrl/Command</kbd> + <kbd>F</kbd>
替换：<kbd>Ctrl/Command</kbd> + <kbd>G</kbd>

合理的创建标题，有助于目录的生成

直接输入1次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成1级标题。
输入2次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	<abbr title="超文本标记语言">HTML</abbr>
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash