在现代 Web 应用中，无限滚动变得越来越常见，它可以帮助用户轻松浏览大量内容，提高用户体验。本文将介绍如何在 React 中实现无限滚动。
实现思路
实现无限滚动的基本思路是，当滚动到页面底部时，加载更多的数据。这涉及到两个关键因素：
- 监听滚动事件
- 判断是否到达页面底部
在 React 中，可以使用 Intersection Observer API 监听滚动，它可以提供更好的性能。判断是否到达页面底部，可以通过比较滚动容器的滚动高度和滚动内容的高度来实现。
实现步骤
- 创建一个组件，并定义你的无限滚动容器
- 初始化需要加载的数据，例如 10 条数据
- 创建一个 IntersectionObserver 实例
- 将 IntersectionObserver 实例附加到无限滚动容器的底部
- 当滚动到底部时，加载更多的数据
- 更新组件状态
下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - ---------- ------- -------- - ---- --------
-------- ---------------- -
----- ------ -------- - -------------
----- ----------- ------------- - ----------------
----- ------ -------- - ------------
----- --------- - -------------
------------ -- -
-------------------- ------- -- -- --- -- -- ----- --- - ------
-- ----
------------ -- -
----- -------- - --- ---------------------
--------- -- -
-- --------------------------- -
-------------------
-
--
- ---------- - -
--
-- ------------------- -
------------------------------------
-
------ -- -- -
-- ------------------- -
--------------------------------------
-
--
-- ----
------------ -- -
-- ----------- -
-------------- -- ---- - ---
--------------------
-
-- -------------
------------ -- -
----- --------- - ----- -- -- -
-- --------
----- ------ - ----- --- ----------------- --
-----------
-- -- -------------------- ------- - -- --- -- -- ----- ------- - -- - - - - - ------
----
-
--
-------------- -- --------- ------------
--
------------
-- --------
------ -
---- -------- ------- ---- --------- ------ -- ----------------
---------------- ------ -- -
---- ------------------------
---
---------- -- ----------------------
------
--
-总结
无限滚动是现代 Web 应用中非常常见的功能之一。在 React 中实现无限滚动可以通过 Intersection Observer API 来监听滚动事件，并比较滚动容器的滚动高度和滚动内容的高度来确定是否到达页面底部。本文提供了一个简单的示例，你可以将其用作实现无限滚动的起点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481853448841e98940fdf75