我們在應用程式和網頁中看到無限滾動，尤其是希望我們滾動的社交媒體。雖然無意識地滾動不好，但構建自己的無限滾動是很棒的。作為開發人員，我們應該嘗試重新創建我們在網上沖浪時看到的組件。它可以挑戰您在實現某些組件時了解更多資訊並跳出框框進行思考。
此外，如果您希望在應用程式中實現無限滾動，那麼您可以按照指南創建自己的滾動。您可以添加自己的程式碼來改善滾動的行為。
在本文中，我們將從頭開始建立一個無限滾動組件。它將涵蓋以下主題：
現在，讓我們開始吧。
我們將使用 CRA 來建立基本的 React 應用程式。您可以透過執行以下命令來做到這一點：
如果您想使用 Vite 或 NextJS 也可以。除了細微的變化外，其他內容將保持不變。
注意：要執行此命令，您需要預先安裝 NodeJS。 另外，從 CRA 中刪除一些不必要的樣板程式碼。
我們將需要一個依賴項來從 API 取得資料。設定好React後，我們就可以透過以下指令安裝axios了：
現在，我們準備好創建組件了。
我們將建立一個從 Tmdb API 取得流行電影資料的元件。您可以從他們的網站免費取得他們的 API 金鑰。讓我們先建立他們獲取數據的位置，然後添加無限滾動功能。
這是應用程式元件的程式碼：
App.js
你基本上可以理解程式碼了，我們在其中獲取資料並將其作為 props 傳遞到 MovieCard 元件中。
創建MovieCard.js組件來顯示每部電影的資訊。
MoveCard.js
這是應用程式的 CSS：
App.css
現在，讓我們先了解如何建立無限滾動。為此，我們將查看滾動條的位置。當捲軸位置正好位於頁面末端上方時，我們將把載入狀態設為true。
我們將有另一個 useEffect ，它將頁面狀態增加 1。一旦更新頁碼，將觸發將頁面作為依賴項的初始 useEffect。這將呼叫 fetchMovie() 函數來取得資料。
首先，我們將添加甚至監聽以了解滾動條位置何時更改。
當捲動發生時，我們將檢查捲軸的目前位置是否位於網頁底部的正上方（即總垂直捲動區域）。如果是，那麼我們將載入狀態改為 true。
成功更改載入狀態後，我們可以實作 useEffect 來增加頁碼。這樣，就可以取得電影數據了。
由於scroll在滾動時會多次觸發handleScroll，因此會導致該函數多次不必要的呼叫。我們可以為函數加上 debounce，這樣在呼叫函數之前就需要一些時間。
這是App.js的完整程式碼：
這是演示應用程式工作原理的 GIF。
Building an infinite scroll component in React can be a highly rewarding experience. It not only enhances your understanding of how scrolling works but also teaches you about state management, event listeners, and optimization techniques like debouncing. By following this guide, you now have a basic infinite scroll setup that you can customize and improve according to your needs.
Whether you're displaying movie data, blog posts, or any other content, this component serves as a strong foundation. Remember, the key is to ensure a smooth user experience by carefully managing when and how data is fetched as the user scrolls. Happy coding!
以上是在 React 中建立無限滾動元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
