如何在 React.js 中加入無限滾動
您是否遇到過在滾動時加載並顯示更多內容的網站或應用程式?這就是我們所說的無限滾動。
無限滾動是一種越來越流行的方法，可以輕鬆瀏覽大量數據並增強整體用戶體驗，特別是在便攜式設備上。
在 React.js 中實現無限滾動
有幾種方法可用於在 React 應用程式中實現無限滾動，其中一種方法涉及利用名為「react-infinite-scroll-component」的程式庫。這個特定庫的元件監視用戶的滾動行為，並在用戶到達頁面末尾時發出一個事件。透過利用此事件，您可以啟動附加內容的載入。
為了在 React 應用程式中合併無限滾動的實例，可以利用框架提供的固有功能。這些功能中包括「componentDidMount」方法，React 在初始化元件時會啟動該方法。
您可以利用此功能來載入初始資料集，然後在使用者進一步向下捲動頁面時使用「componentDidUpdate」方法來取得其他資訊。
React Hooks 可用於在應用程式中實現無限滾動功能，在內容連續載入而不會中斷時提供無縫的使用者體驗。
使用react-infinite-scroll-component 函式庫
使用 React 無限滾動元件時可以採用多種方法。
安裝react-infinite-scroll-component
要啟動使用，第一步涉及透過節點套件管理器 (npm) 安裝它。
npm install react-infinite-scroll-component --save
將react-infinite-scroll-component導入React
安裝之後，有必要將無限滾動庫合併到您的 React 元素中。
import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
class App extends React.Component {
constructor() {
super()
this.state = {
items: [],
hasMore: true
}
}
componentDidMount() {
this.fetchData(1)
}
fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i\+\+) {
newItems.push(i )
}
if (page === 100) {
this.setState({ hasMore: false })
}
this.setState({ items: [...this.state.items, ...newItems] })
}
render() {
return (
<div>
<h1>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
程式碼從react-infinite-scroll-component 函式庫導入React 和InfiniteScroll 元件，隨後建立一個有狀態元件。此組件的初始狀態由一個空的「items」數組和一個設定為 true 的「hasMore」標誌組成。
設定參數
在componentDidMount生命週期方法中，必須呼叫fetchData函數並將page參數設為1。 fetchData 程序執行 API 請求來檢索資料。這個 React 無限滾動器實例產生虛構資料並建構一個包含一百個元素的陣列。
當 page 參數的值達到 100 時，表示沒有其他可用的項目，明智的做法是將「hasMore」標誌配置為 false，從而阻止對 InfiniteScroll 元件的任何進一步呼叫。隨後，使用新取得的資料集更新狀態是一種有效的行動方案。
render 方法利用 InfiniteScroll 元件，提供某些屬性作為參數。具體來說，「dataLength」屬性被指派一個等於「items」數組長度的值。此外，「 fetchData 」函數用作另一個提供的屬性。最後，「hasMore」屬性設定為等於「hasMore」標誌的值。
loader 屬性透過將元件的內容呈現為載入指示來發揮作用。同樣，完成所有資料載入後，endMessage 屬性將在元件內顯示為訊息。
在使用 InfiniteScroll 元件時，通常會使用某些常用的道具。然而，也可以根據需要提供額外的道具。
使用內建函數
React 提供了一組固有的功能，可以透過利用其內建方法來實現 InfiniteScroll。
React 中的「componentDidUpdate」生命週期方法由框架在元件更新後呼叫。這種事件驅動的方法允許開發人員實現自訂邏輯，以檢測何時需要根據用戶滾動位置獲取新資料。本質上，該方法充當一種機制，用於在檢測到用戶已到達頁面可見部分的末尾時確定是否應加載低於當前視口閾值的附加內容。
React 提供了一種名為「scroll」的內建機制，該機制由用戶的滾動操作觸發，允許開發人員監視並保持對其應用程式中當前滾動位置的了解。這種事件驅動的方法可以在使用者到達可見頁面範圍的底部時動態載入附加內容，從而確保最佳的瀏覽體驗。
提供的程式碼示範了在 React 應用程式上下文中使用上述技術的實例，特別是與實作無限滾動功能相關的實例。
import React, {useState, useEffect} from 'react'
function App() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
fetchData(page)
}, [page])
const fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i\+\+) {
newItems.push(i)
}
if (page === 100) {
setHasMore(false)
}
setItems([...items, ...newItems])
}
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
if (scrollTop \+ clientHeight >= scrollHeight) {
setPage(page \+ 1)
}
}
useEffect(() => {
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [items])
return (
<div>
{items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</div>
)
}
export default App
此程式碼同時使用了 useState 和 useEffect 掛鉤，以便於狀態管理以及在應用程式中實現所需的副作用。
在 useEffect 鉤子的範圍內，函數的當前迭代透過將分頁的當前狀態作為參數傳遞來呼叫 fetchData 方法。然後，所述方法執行 HTTP 請求以從外部來源檢索資訊。僅出於說明目的，在本例中，我們正在模擬一些假設資料的生成，以舉例說明正在討論的概念。
for 迴圈迭代地將一系列元素追加到 newItems 陣列中，其值逐漸增加，直到達到 100。同時，如果「page」參數的預定值超過一百，則布林變數「hasMore」被設定為假，從而停止無限滾動機制發出的任何附加請求。
最後，根據更新的資訊確定當前狀態。
onScroll 方法維護當前滾動位置的記錄，並且在到達頁面底部時，它會動態加載附加內容或資料以響應用戶與介面的進一步互動。
使用 useEffect Hook 可以方便地為捲動事件新增監聽器。響應於所述事件的發生，呼叫指定為“onScroll”的方法。
React 中無限滾動的優點和缺點
React 的無限滾動實作既有優點也有缺點。一方面，此功能透過提供無縫導航體驗增強了整體使用者介面，特別是在螢幕空間有限的行動平台上。相反，存在這樣的潛在風險:使用者可能會忽略位於其初始視點之外的內容，因為他們可能沒有充分滾動以查看所有項目。
仔細評估在網頁設計中使用無限滾動技術的優點和缺點至關重要，因為這種方法可能對使用者體驗和參與度產生重大影響。
透過 React.js 中的無限滾動改善使用者體驗
在 React.js 應用程式中結合無限滾動機制可以消除額外點擊來存取更多內容的需要，從而增強整體使用者體驗。這種方法還有可能減少頁面請求的總數，從而提高應用程式的效率和效能。
將 React 應用程式部署到 GitHub Pages 是一個簡單的過程，不需要金錢投資。