随着现代 Web 应用程序的增长和复杂性的提高，React 分页加载更多已成为许多开发人员的首选解决方案。与此同时，分页加载更多已成为用户体验的重要组成部分，让用户可以浏览更多的数据，并在应用程序中实现连续滚动。
在这篇文章中，我们将深入探讨如何使用 React 实现分页加载更多功能，并提供完整的示例代码。
实现步骤
第一步：创建一个 State
React 依赖于状态来管理 UI，所以我们需要创建一个状态来保存要加载的数据。为了实现分页，我们还需要保存当前页数。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
----- --
--
-
-- ---
-第二步：请求数据
完成第一步后，接下来需要获取要加载的数据。在这里，我们将使用 fetch 函数。在 componentDidMount 方法中，我们将发送第一页数据的请求。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
----- --
--
-
----- ------------------- -
----- -------- - ----- ---------------------------------------
----- ---- - ----- ----------------
--------------- ---- ---
-
-- ---
-第三步：更新 State
接下来，我们需要更新状态来将新加载的数据添加到列表中。为此，我们将使用 concat 方法来连接两个数组。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
----- --
--
-
----- ------------------- -
----- -------- - ----- ---------------------------------------
----- ---- - ----- ----------------
------------------------- -- --
----- ---------------------------
----
-
-- ---
-第四步：处理滚动事件
在滚动事件中处理分页逻辑也是实现分页加载更多的关键。在这个例子中，我们将使用 Intersection Observer API 来检测元素是否在浏览器的视图内。当元素进入视图内时，我们将加载下一页数据。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
----- --
--
---------------- - ------------------
-
----- ------------------- -
----- -------- - ----- ---------------------------------------
----- ---- - ----- ----------------
------------------------- -- --
----- ---------------------------
----
----- ------- - -
----- -----
----------- --------
---------- ---
--
----- -------- - --- ---------------------------------------------------- ---------
-------------------------------------------
-
------------------------ -
----- - - ---------------------------------
-- ----------------- - -- -
----- -------- - --------------- - --
-------------------------------
---------------- -- ----------------
------------ -- ------------------------- -- --
----- ----------------------------
----- --------
-----
-
--------------- ------ - ---
-
-- ---
-在这里，我们创建了一个 ref 对象来引用加载更多的元素。然后，我们在组件的 componentDidMount 方法中创建一个新的 IntersectionObserver 实例来监听元素的可见性。
如果元素部分或者全部离开了视图，IntersectionObserver 将会触发我们提供的回调函数。
在回调函数中，我们将比较元素的位置以确定用户是否滑动到底部。如果是，我们将增加 page 状态的值，并且向服务器请求下一页数据。最后，我们将更新状态来包含新的数据和页数。
第五步：呈现 UI
最后，我们需要呈现数据并将其分成分页。为此，我们将使用 slice 方法来从完整列表中截取特定数量的项。然后，我们将呈现分页按钮，并使用 map 函数将数据项呈现为列表中的元素。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
----- --
--
---------------- - ------------------
-
-- ---
-------- -
----- ------------ - ---
----- ----- - ------------------------ ---------------- - -- - --------------
------ -
--
----
----------------- ------ -- -
--- -----------------------
---
-----
---- ------------------------------ -------------
---
--
-
-示例代码
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
----- --
--
---------------- - ------------------
-
----- ------------------- -
----- -------- - ----- ---------------------------------------
----- ---- - ----- ----------------
------------------------- -- --
----- ---------------------------
----
----- ------- - -
----- -----
----------- --------
---------- ---
--
----- -------- - --- ---------------------------------------------------- ---------
-------------------------------------------
-
------------------------ -
----- - - ---------------------------------
-- ----------------- - -- -
----- -------- - --------------- - --
-------------------------------
---------------- -- ----------------
------------ -- ------------------------- -- --
----- ----------------------------
----- --------
-----
-
--------------- ------ - ---
-
-------- -
----- ------------ - ---
----- ----- - ------------------------ ---------------- - -- - --------------
------ -
--
----
----------------- ------ -- -
--- -----------------------
---
-----
---- ------------------------------ -------------
---
--
-
-结论
在本文中，我们看到了如何使用 React 实现分页加载更多功能。我们通过创建一个状态保存要加载的数据，使用 Intersection Observer API 检测元素是否在视图内，并使用 slice 方法将数据呈现在 UI 中。最后，我们提供了完整的示例代码，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff419866aa76bc7f38ba0a