如何在React中使用Intersection Observer API实现无限滚动
内容提要
本文介绍了如何在JavaScript中实现无限滚动功能，使用Intersection Observer API动态加载内容，提升用户体验。文章提供了创建React应用的步骤，包括数据获取函数和无限滚动组件的构建，强调了这种方法简化了代码并提高了性能。
延伸解读
为什么用 Intersection Observer 替代滚动事件
文章指出，传统滚动监听需要为每个滚动事件绑定回调，并手动计算元素位置，代码复杂且性能开销大。Intersection Observer 异步观察目标元素与视口的交叉状态，无需频繁计算，也减少了事件监听器的数量。在无限滚动场景中，它只在最后一个元素进入视口时触发加载，既简化了代码，又避免了不必要的请求，适合需要动态加载内容的列表。
callback ref 在动态列表中的关键作用
文章强调，由于无限滚动中“最后一个元素”会随着新数据加载而不断变化，普通 ref 无法动态更新观察目标。callback ref 在组件挂载或卸载时被调用，可以灵活地断开旧观察者并观察新节点。配合 useCallback 缓存函数，避免每次渲染都重新创建，确保只在 loading 状态变化时更新观察逻辑。这是实现按需加载的核心技巧。
分页参数与加载状态的配合逻辑
文章使用 page 和 limit 两个参数控制数据请求，page 随滚动递增，limit 固定为 10，每次只加载一屏左右的数据。加载时设置 loading 为 true，防止重复触发请求；数据返回后追加到现有列表并重置 loading。这种模式减少了单次请求的数据量，降低了服务器压力，同时通过状态管理保证滚动触发的请求不会重叠。
Q&A
什么是无限滚动，它有什么好处？
无限滚动是一种用户体验设计，能够动态加载内容，提升用户粘性，减少服务器负担。
如何在React中实现无限滚动？
在React中实现无限滚动需要使用Intersection Observer API来动态加载数据，并构建相应的组件和数据获取函数。
Intersection Observer API的作用是什么？
Intersection Observer API用于异步观察目标元素与视口的交集变化，简化代码并提高性能。
如何创建数据获取函数fetchPosts？
数据获取函数fetchPosts使用JSONPlaceholder的/posts API，通过传递页码和限制参数来获取数据。
如何使用callback refs来观察最后一个元素？
使用callback refs可以动态观察最后一个元素，并在其进入视口时触发新的API请求以加载更多内容。
实现无限滚动时需要注意哪些性能问题？
实现无限滚动时应避免频繁的事件监听和手动计算元素位置，使用Intersection Observer API可以有效提高性能。
