在 Web 开发中，无限滚动加载是一种常见的需求。当用户滚动到页面底部时，自动加载更多的数据或内容，可以提升用户体验，减少页面加载时间，同时也可以降低服务器压力。在 React 中实现无限滚动加载也比较容易。
实现思路
通常实现无限滚动加载的方式就是监听用户的滚动事件，当用户滚动到底部时，通过 AJAX 请求获取更多的数据或内容，并动态渲染到页面上。在 React 中，可以通过组件的生命周期来实现无限滚动加载。
首先，创建一个组件，在 componentDidMount 生命周期中添加一个监听滚动事件的函数。在函数中，判断页面是否滚动到底部，如果是，则请求接口获取数据，并使用 setState 更新组件的数据。同时，在 componentDidUpdate 生命周期中，判断是否需要再次请求接口，以防止反复请求。
------ ----- ---- --------
----- -------------- ------- --------------- -
----- - -
----- ---
-------- ------
----- --
--
------------------- -
--------------------------------- -------------------
-----------------
-
---------------------- -
------------------------------------ -------------------
-
----------------------------- ---------- -
-- ---------------- --- --------------- -
-----------------
-
-
------------ - -- -- -
----- - ------- - - -----------
----- ------------ -
------------- -- ------
- ------------------
- --------------------------------------
----- ---- - --------------
----- ---- - -------------------------
----- --------- - ---------
------------------
------------------
------------------
------------------
------------------
--
----- ------------ - ------------ - -------------------
-- --------- -- ------------ -- ---------- -
---------------
----- --------------- - --
---
-
--
--------- - ----- -- -- -
----- - ---- - - -----------
--------------- -------- ---- ---
----- -------- - ----- -------------------------------
----- ------- - ----- ----------------
---------------
----- -------------------- ------------
-------- ------
---
--
-------- -
----- - ----- ------- - - -----------
------ -
-----
---------------- -- -
---- -------------------------------
---
-------- -- ----------------------
------
--
-
-
------ ------- ---------------示例代码
例如，我们在 componentDidMount 中添加一个 fetch 函数来调用接口获取数据，如下所示：
------------------- -
--------------------------------- -------------------
-----------------
-
--------- - ----- -- -- -
----- - ---- - - -----------
--------------- -------- ---- ---
----- -------- - ----- -------------------------------
----- ------- - ----- ----------------
---------------
----- -------------------- ------------
-------- ------
---
--在 handleScroll 中判断页面是否滚动到了底部，如下所示：
------------ - -- -- -
----- - ------- - - -----------
----- ------------ -
------------- -- ------
- ------------------
- --------------------------------------
----- ---- - --------------
----- ---- - -------------------------
----- --------- - ---------
------------------
------------------
------------------
------------------
------------------
--
----- ------------ - ------------ - -------------------
-- --------- -- ------------ -- ---------- -
---------------
----- --------------- - --
---
-
--最后，在 render 函数中，展示数据及加载动画，如下所示：
-------- -
----- - ----- ------- - - -----------
------ -
-----
---------------- -- -
---- -------------------------------
---
-------- -- ----------------------
------
--
-总结
通过以上代码，我们成功地实现了 React 中的无限滚动加载。使用组件的生命周期函数，监听滚动事件，进行 AJAX 请求等，可以实现无限滚动加载的功能。希望这篇文章可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6649100bd3423812e47cf274