在现代 Web 应用程序中，无限滚动列表是一项非常常见的功能，它可以让用户无需点击分页按钮或滚动到页面底部就可以查看大量数据。在 React 中，我们可以使用一些技术来实现这个功能。
实现思路
我们可以将无限滚动列表分为两个部分：数据和 UI。数据部分负责获取数据并将其传递给 UI 部分，UI 部分负责渲染数据并处理滚动事件。我们可以使用 React Hooks 来实现这个功能。
数据部分
我们需要用一个状态来存储列表数据，以及一个函数来获取更多的数据。我们可以使用 useState 和 useEffect 来实现这个功能。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
-------- ---------------------------- -
----- ------ -------- - -------------
----- ------ -------- - ------------
------------ -- -
----- -------- - ----- -- -- -
----- ------- - ----- ----------------
---------------- -- ------------- -------------
---------------- -- -------- - ---
--
-----------
-- ----------- -------
------ -----
-在这个自定义 Hook 中，我们将 data 和 page 存储在状态中，并在组件挂载时使用 useEffect 来异步加载更多数据。在加载新数据时，我们将其添加到 data 中，并将 page 值增加 1。
UI 部分
我们需要一个组件来渲染列表，并在滚动事件发生时触发加载更多数据的函数。我们可以使用 useRef 和 useCallback 来实现这个功能。
-- -------------------- ---- -------
------ - ------- ----------- - ---- --------
-------- -------------------- --------- -- -
----- ---- - -----------------------------
----- ------- - -------------
----- ------------ - -------------- -- -
----- - ---------- ------------- ------------ - - ----------------
-- ---------- - ------------ --- ------------- -
------------
-
-- -------------
------ -
---- ------------- ------------------------
-------------- -- -
---- --------------------------------
---
------
--
-在这个组件中，我们使用 useInfiniteScroll Hook 来获取数据，使用 useRef 来引用列表容器，并使用 useCallback 来创建一个处理滚动事件的函数。在处理滚动事件时，我们检查滚动条是否已经滚动到底部，如果是，则触发加载更多数据的函数。在渲染列表时，我们使用 map 函数将数据数组转换为列表项。
示例代码
下面是一个完整的示例代码，它使用 GitHub API 来获取用户仓库列表并展示在一个无限滚动列表中。
-- -------------------- ---- -------
------ - --------- ---------- ------- ----------- - ---- --------
-------- ---------------------------- -
----- ------ -------- - -------------
----- ------ -------- - ------------
------------ -- -
----- -------- - ----- -- -- -
----- ------- - ----- ----------------
---------------- -- ------------- -------------
---------------- -- -------- - ---
--
-----------
-- ----------- -------
------ -----
-
-------- -------------------- --------- -- -
----- ---- - -----------------------------
----- ------- - -------------
----- ------------ - -------------- -- -
----- - ---------- ------------- ------------ - - ----------------
-- ---------- - ------------ --- ------------- -
------------
-
-- -------------
------ -
---- ------------- ----------------------- -------- ------- -------- --------- ------ ---
-------------- -- -
---- -------------------------------
---
------
--
-
-------- ----- -
----- ---------- ------------ - -------------
----- ------- --------- - -------------
----- --------- - ----- ---- -- -
----- -------- - ----- ---------------------------------------------------------------------------------
----- ---- - ----- ----------------
------ -----
--
----- ------------ - ----- -- -- -
----- ---- - ----- -------------
---------------
--
------ -
-----
-----
------ ----------- ---------------- ----------- -- ---------------------------- --
------- --------------------------------------
------
------------------- --------------------- --
------
--
-
------ ------- ----结论
在本文中，我们介绍了如何使用 React Hooks 来实现无限滚动列表。我们将数据和 UI 分开处理，并使用 useState、useEffect、useRef 和 useCallback 来实现这个功能。这个方法可以应用于任何需要无限滚动列表的场景，并且可以让用户更加方便地查看大量数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675661a4d8a608cf5d8b5490