分享滚动加载的第三方库

分享滚动加载的一些库

1 引言

在写页面的时候会经常用到滚动加载，有时会花费很长的时间去挑选尝试npm上的哪个库会比较适合自己的要求，为了节省大家的时间，简单介绍几个库，可以方便大家使用。

2 简介

下面就是一些库的效果展示了，以动态图的方式展现，可以更好的理解这些库的效果。

React Lazy Load Image Component

先是图片的懒加载

这个是当加载 src 中指定的图像时，基于并转换为彩色图像呈现黑白图像。

当加载 src 中指定的图像时，渲染基于并转换为非模糊图像的模糊图像。

在加载图像时呈现空白区域并转换为完全不透明。

三种效果可以满足一般的需求

它还可以做到延迟加载

当您在同一页面中有许多元素要延迟加载时，您的性能可能会很差，因为每个元素都在监听滚动/调整大小事件。在这种情况下，最好用 HOC 包装这些组件的最深公共父级以跟踪这些事件

当然，他可以做到组件的懒加载，但是效果一般，不推荐使用。

react-lazyload

这个库的图片懒加载就很正常，也支持图片渐入效果

这个可以支持组件懒加载

也可以获取组件的可见区域从服务器重新加载数据的次数。

• 使用scrollTo 可以设置导航栏，快速跳转到相应的位置
• 使用内部溢出容器 页面内部还有一个容器。
• 使用debounce 防抖/节流，在滚动停止后再加载相应的组件或图片
• 自定义占位符 当延迟加载的组件在视口中不再可见时，它会被卸载并替换为占位符

当然这些效果对图片也是适用的。

优点
假设页面上有一个固定的日期选择器，当用户选择一个不同的日期时，所有显示数据的组件都应该发送带有新的日期参数的ajax请求来检索更新的数据，即使其中许多在视口中不可见。当一次有太多的请求时，这会使服务器负载异常。使用LazyLoad组件将通过只更新在视口中可见的组件来缓解这种情况。

这是一个非常流行的库，周下载量非常可观，使用也很简单。内置效果也很多，比较推荐使用，可惜的是官方给的demo的image的部分，图片加载不出来了惟有下载到本地，才会有图片，但这丝毫不影响这是一个非常好用的库。

react-intersection-observer
首先我非常推崇这个库，在npm上下载量也是最高的！而且作者也是经常的维护，最近一次更新还是在七天前，这向我们展示了他的活力，相信他可以给我们带来更好的体验。
在初次使用时就感受到了这个库的对用户的友善，demo是在代码沙盒里的，我们可以边看效果，边修改代码，查看每个参数的具体效果。这是别的库所没有的良好体验。

响应Intersection Observer API 的实现来告诉您元素何时进入或离开视口。
包含Hooks、渲染道具和普通子项实现。

react-intersection-observer这个库可以轻松判断元素是否可见，而这也恰是我所需要的，我所想的就是判断元素是否在可视区域内而选择是否进行组件的渲染。

react-intersection-observer提供了 Hook。useInView判断元素是否在可视区域内，API 如下：

​import React from "react";
import { useInView } from "react-intersection-observer";

const Component = () => {
  const [ref, inView] = useInView();

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );
};

由于判断元素是否可见是基于 dom 的，所以必须将ref回调函数传递给代表元素轮廓的 DOM 元素，上面的例子中，我们将ref传递给了最外层 DIV。

useInView还支持下列参数：

• root：检测是否可见基于的视窗元素，默认是整个浏览器 viewport。

• rootMargin：root 边距，可以在检测时提前或者推迟固定像素判断。

• threshold：是否可见的阈值，范围 0 ～ 1，0 表示任意可见即为可见，1 表示完全可见即为可见。

• triggerOnce：是否仅触发一次。
  react-intersection-observer这个库的使用还是非常简单好用的，而</ inView>中不仅仅可以包裹组件，其他的内容也可以被包裹，构成懒加载，比如图片，路由。而我用到的内容比较少，还有其他的一些参数没有用到我就不在此进行介绍了，这里有一篇对react-intersection-observer源码进行解析的文章，可以尝试了解一下。
  3 最后

  感谢阅读，第一次写分享，见识浅薄，内容写的可能不够完善，只希望对你有所帮助！

标签：滚动,observer,可见,react,组件,intersection,第三方,加载
来源： https://blog.csdn.net/shaonaoz/article/details/121676884