react 滚动触底加载

### 实现React中滚动触底时自动加载更多内容 在 React 中实现滚动触底功能通常可以通过监听 `scroll` 事件来完成。为了优化性能，可以采用更现代的技术如 Intersection Observer API 或者使用第三方库辅助开发。 #### 方法一：基于原生 Scroll 和 getBoundingClientRect 的方式 通过监听窗口的 `scroll` 事件，并利用 DOM 元素的 `getBoundingClientRect()` 来判断是否接近底部[^4]： ```javascript import React, { useEffect, useState, useRef } from 'react'; function InfiniteScrollComponent() { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const observerTarget = useRef(null); useEffect(() => { async function fetchData() { if (loading || !observerTarget.current) return; setLoading(true); try { // 替换为真实的API请求逻辑 const newData = await fetchMoreData(); setData(prevData => [...prevData, ...newData]); } catch (error) { console.error('Error fetching data:', error); } setLoading(false); } function handleIntersection(entries) { entries.forEach(entry => { if (entry.isIntersecting && !loading) { fetchData(); } }); } const options = { root: null, rootMargin: '0px', threshold: 1.0 }; const observer = new IntersectionObserver(handleIntersection, options); if (observerTarget.current) { observer.observe(observerTarget.current); } return () => observer.disconnect(); }, [loading]); async function fetchMoreData() { // 模拟异步数据获取 return new Promise(resolve => setTimeout(() => resolve([Math.random(), Math.random()]), 1000)); } return ( <div style={{ height: '80vh', overflowY: 'auto' }}> {data.map((item, index) => ( <div key={index} style={{ padding: '10px', border: '1px solid #ccc' }}> Item {item} </div> ))} {!loading ? ( <div ref={observerTarget}></div> {/* 观察的目标 */} ) : ( <p>Loading...</p> )} </div> ); } export default InfiniteScrollComponent; ``` 此方法的优点是可以完全控制行为，缺点是需要手动处理细节以及可能存在的兼容性问题。 --- #### 方法二：使用 Intersection Observer API 相比传统的方式，Intersection Observer 提供了一种更加高效的方式来检测元素是否进入视口范围。上述代码已经展示了其基本用法。 --- #### 方法三：借助第三方库 react-infinite-scroll-component 如果不想自己编写复杂的逻辑，可以选择成熟的第三方组件库简化开发过程。例如，`react-infinite-scroll-component` 是一个非常流行的解决方案[^1]: 安装依赖： ```bash npm install react-infinite-scroll-component ``` 示例代码如下： ```javascript import React, { useState } from 'react'; import InfiniteScroll from 'react-infinite-scroll-component'; const App = () => { const [items, setItems] = useState(Array.from({ length: 20 })); const fetchMoreData = () => { setTimeout(() => { setItems(items.concat(Array.from({ length: 20 }))); }, 1000); }; return ( <InfiniteScroll dataLength={items.length} next={fetchMoreData} hasMore={true} loader={<h4>Loading...</h4>} endMessage={ <p style={{ textAlign: 'center' }}> <b>End of content</b> </p> }> {items.map((i, index) => ( <div key={index} style={{ padding: '10px', border: '1px solid #ccc' }}> Item {index} </div> ))} </InfiniteScroll> ); }; export default App; ``` 该方法简单易用，适合快速集成到现有项目中。 --- #### 方法四：针对移动端场景（React Native） 对于移动应用开发者来说，可以直接引入专门设计用于无限滚动的库，比如 `react-native-infinite-scroll-view`[^3]： 安装依赖： ```bash npm install @onelife/react-native-infinite-scroll-view ``` 示例代码： ```javascript import React, { useState } from 'react'; import { View, Text, FlatList } from 'react-native'; import InfiniteScrollView from '@onelife/react-native-infinite-scroll-view'; const App = () => { const [items, setItems] = useState(Array.from({ length: 20 })); const loadMore = () => { setTimeout(() => { setItems([...items, ...Array.from({ length: 20 })]); }, 1000); }; return ( <InfiniteScrollView onFetchMore={loadMore}> <FlatList data={items} renderItem={({ item, index }) => ( <View style={{ padding: 10, borderBottomWidth: 1, borderColor: '#ccc' }}> <Text>Item {index}</Text> </View> )} keyExtractor={(item, index) => String(index)} /> </InfiniteScrollView> ); }; export default App; ``` 这种方案特别适用于跨平台的应用程序开发环境。 --- #### 性能注意事项 无论选择哪种方式，都需要关注以下几个方面以提升用户体验和性能表现： - **防抖与节流**：减少不必要的重复调用。 - **懒加载图片或其他资源**：仅当它们即将可见时才加载相关内容。 - **虚拟列表技术**：只渲染当前屏幕内的条目，而不是一次性全部渲染出来。 ---