在开发前端应用时，常常需要展示长列表数据。而使用传统的分页展示方式，会给用户带来使用上的不便。因此，在通常情况下使用无限下拉加载方式是比较受欢迎的方式。但是，实现无限下拉加载需要涉及到很多细节，且难以实现的地方比较多。因此，我们需要使用一些成熟的第三方组件库来方便我们实现无限下拉加载功能。本文介绍了一个使用 React 开发的一个组件库——clarity-react-infinite-list，该组件库提供了非常实用的两个无限下拉加载组件。本文将介绍如何在 React 项目中使用该库，以及如何配置和使用其提供的组件。
简介
clarity-react-infinite-list 是一个 React 组件库，可以帮助我们快速实现无限下拉加载的列表功能。该库提供了两个组件：InfiniteScroll 和 InfiniteList，两个组件都可以支持无限下拉加载，但各有所异。
InfiniteScroll 只提供了一个组件，它支持在指定的容器中进行无限下拉加载，而不需要我们使用额外的组件/包装器将其包裹。
InfiniteList 是一个更加高级的组件，它提供了一个完整的列表，包括容器、单个列表项、加载指示器等。而且，该组件可以使用虚拟滚动，这意味着即使您有大量的列表项数据，性能也不会受到影响。
这两个组件旨在帮助开发者实现无限下拉加载列表，并提高列表渲染的性能。
安装
我们可以使用npm安装clarity-react-infinite-list和它的依赖项：
npm install --save clarity-react-infinite-list
当您按照上述步骤进行安装后，您可以将您的 React 组件导入并将其插入你的应用程序中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - -------------- - ---- ------------------------------
-------- ----- -
----- ---- - ------ ----------
----- -------------- - -- -- ------ --------------------
------ -
-----
-------------
------------
-------------------------
---------------
--
---------------
--------------------------
------------------
-----------------
------
--如上所述，加载数据和绑定回调函数，您可以将其导入到 React 组件中并进行使用。
API
clarity-react-infinite-list 提供了一些路由配置选项，使您能够调整组件的行为。以下是一些常用选项：
InfiniteScroll
loadMore：一个必需的函数。当滚动达到一个给定的阈值时，此函数将被调用，以便加载更多的数据。threshold：当滚动到离底部指定像素时开始加载更多数据。默认200。hasMore：用于报告组件是否应该停止调用加载函数并触发“没有更多数据”的状态。默认为 true。loader：自定义加载指示器组件。scrollableTarget：可以是一个字符串或 DOM 元素。当滚动事件添加到非父元素时使用。默认情况下，将滚动事件添加到 window。
InfiniteList
items：需要在列表中显示的条目。loadMore：一个必需的函数。当滚动达到一个给定的阈值时，此函数将被调用，以便加载更多的数据。itemHeight：每个项目的高度。这个属性是必需的。由于计算效率的原因，我们只需要知道列表中的 s单个条目高度。组件会使用这个元素的高度来计算出滚动位置和当前使用的条目数。如果您有一个像素随机大小的元素，请参阅动态高度部分。itemKey：每个条目的键。默认为项目的索引。loader：自定义加载指示器组件。hasMore：用于报告组件是否应该停止调用加载函数并触发“没有更多数据”的状态。默认为 true。virtualize：是否启用了优化的虚拟滚动。默认为 true。pageSize：每次加载更多数据时要加载的页面大小。默认值为10。initialLoader：组件是否应该在渲染列表之前加载一些初始数据。默认为 false。className：自定义类名称的字符串，以应用于组件的根元素。
示例
以下示例使用了一个简单的 mock 数据，演示了 clarity-react-infinite-list 组件库的使用情况：
-- -------------------- ---- -------
------ ------ - ------------ -------- - ---- --------
------ - ------------ - ---- ------------------------------
------ -------- ---- ------------------
-------- ----- -
----- ------ -------- - -------------------
----- -------- - -------------- -- -
------------- -- -
----------------- --------------
-- ------
-- -------
------ -
---- -------- ------- ------- ---
-------------
------------
---------------
-------------------
--------------
--
------
--
-在上面的示例中，我们基于假数据 mockdata.json 模拟出一个列表，并将其传递给 InfiniteList 组件。组件每次加载10个新的条目，直到列表中的数据全部加载完成。同时，还演示了如何自定义加载指示器的外观。
结论
clarity-react-infinite-list是一个实用的组件库，它可以帮助React开发者更加高效地实现无限下拉加载列表功能。通过本教程的介绍，我们了解了该库的使用方法和API接口。希望本文对您在使用这个组件库时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664081e8991b448e24b6