前言
在 React 开发中，经常需要用到列表数据的加载和渲染，但万一数据量很大，如何处理呢？这时候就需要用到 react-list-infinite 这个 npm 包。该包可以帮我们实现无限滚动加载、虚拟滚动等功能，大大提高了前端列表数据的渲染效率。
安装
可以通过 npm 包管理器来安装 react-list-infinite，如下所示：
npm install react-list-infinite --save
安装完成后，就可以在项目中 import 引入这个库了。
import { List, AutoSizer } from "react-list-infinite";使用方法
react-list-infinite 的使用方法分两部分，一部分是外部容器需要用到的组件和样式，另一部分是需要填充数据的子组件以及它们的样式。
外部容器
List 和 AutoSizer 是 react-list-infinite 提供的两个主要组件。其中，AutoSizer 是负责监听外部容器的宽高变化，从而动态地调整 List 请求数据的数量。而 List 组件则是实现了无限滚动功能的列表容器。
-- -------------------- ---- -------
------ - ----- --------- - ---- ----------------------
----- ---- - --- -- ----
----- ------------- - -- -- -----
-------- ------------------ -
----- ---- - ------------
------ -
---- ------------
-------------------
------
--
-
-------- ----- -
------ -
-----------
--- ------- ----- -- -- -
-----
---------------
-------------
----------------------
-------------- -- -------- --
-------------------------
-----------------------------
--
--
------------
--
-内部子组件
在代码中，我们使用 rowRenderer 函数来填充每一行的内容，接收一个 index 参数，返回该行的 jsx 内容。我们需要在该函数中通过 index 来获取数据列表中对应的项，然后返回它填充到列表中。
预加载数据
在实际开发中，我们希望在列表滑动到底部时能够自动加载更多数据，以保证用户体验。而 react-list-infinite 提供了 overscanCount 参数，可以在滑动到底部前就提前加载一定数量的数据，从而避免用户感到卡顿的情况。
示例代码
接下来，我们提供一个完整的示例代码供大家参考和学习。
-- -------------------- ---- -------
------ - ----- --------- - ---- ----------------------
----- ---- - --------- --------- ----------
----- ------------- - --
-------- ------------------ -
----- ---- - ------------
------ -
---- ----------- -------- ------- --- ----------- ------ ---
-------------------
------
--
-
-------- ----- -
------ -
-----------
--- ------- ----- -- -- -
-----
---------------
-------------
----------------------
--------------
-------------------------
-----------------------------
--
--
------------
--
-结论
react-list-infinite 是一个功能强大的 React 库，可以帮助我们在前端应用中处理海量列表数据，减少各种性能瓶颈，提高应用性能。希望本文能对大家学习 react-list-infinite 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005774d81e8991b448eacda