Cara Menambahkan Gulir Tak Terbatas di React.js


Pernahkah Anda menemukan situs web atau aplikasi yang memuat dan menampilkan lebih banyak konten saat Anda menggulir? Inilah yang kami sebut gulungan tak terbatas.


Gulir tak terbatas adalah teknik populer yang mengurangi jumlah pemuatan halaman. Itu juga dapat membuat pengalaman pengguna lebih lancar, terutama di perangkat seluler.


Ada beberapa cara berbeda untuk menerapkan pengguliran tak terbatas di React.js. Salah satu caranya adalah dengan menggunakan pustaka seperti react-infinite-scroll-component. Pustaka ini menyediakan komponen yang akan memicu peristiwa saat pengguna menggulir ke bagian bawah halaman. Anda kemudian dapat menggunakan acara ini untuk memuat lebih banyak konten.

Cara lain untuk mengimplementasikan infinite scroll adalah dengan menggunakan fungsi bawaan yang disediakan oleh React. Salah satu fungsi tersebut adalah “componentDidMount” yang dipanggil React saat komponen pertama kali dipasang.

Anda dapat menggunakan fungsi ini untuk memuat kumpulan data pertama dan kemudian menggunakan fungsi “componentDidUpdate” untuk memuat lebih banyak data saat pengguna menggulir ke bawah. Anda juga dapat menggunakan React hooks untuk menambahkan fitur pengguliran tanpa batas.

Untuk menggunakan komponen react-infinite-scroll, Anda harus menginstalnya terlebih dahulu menggunakan npm:

npm install react-infinite-scroll-component 

Kemudian, Anda dapat mengimpornya ke dalam komponen React Anda.

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

Kode ini dimulai dengan mengimpor React dan komponen InfiniteScroll dari pustaka komponen react-infinite-scroll. Itu kemudian membuat komponen stateful dan menginisialisasi status dengan kosong item larik dan a memilikiSelengkapnya bendera disetel ke true.

Dalam metode siklus hidup componentDidMount, Anda memanggil ambilData metode dengan a halaman parameter dari 1. Metode fetchData membuat panggilan API untuk mendapatkan beberapa data. Contoh ini hanya menghasilkan beberapa data dummy. Itu kemudian membuat array 100 item.

Jika parameter halaman adalah 100, tidak ada lagi item, jadi setel flag hasMore ke false. Ini akan menghentikan komponen InfiniteScroll dari membuat panggilan API lebih lanjut. Terakhir, atur status menggunakan data baru.

Metode render menggunakan komponen InfiniteScroll dan meneruskan beberapa alat peraga. Prop dataLength diatur ke panjang array item. Prop berikutnya diatur ke metode fetchData. Prop hasMore diatur ke flag hasMore. Prop loader menyebabkan komponen merender isinya sebagai indikator pemuatan. Demikian juga, itu akan membuat prop endMessage sebagai pesan ketika semua data telah selesai dimuat.

Ada juga alat peraga lain yang dapat Anda berikan ke komponen InfiniteScroll, tetapi inilah yang paling sering Anda gunakan.

reaksi aplikasi dengan gulir tak terbatas menggunakan paket pihak ketiga

Menggunakan Fungsi Bawaan

React juga memiliki beberapa metode built-in yang dapat Anda gunakan untuk mengimplementasikan infinite scroll.

Metode pertama adalah componentDidUpdate. React memanggil metode ini setelah memperbarui komponen. Anda dapat menggunakan metode ini untuk memeriksa apakah pengguna telah menggulir ke bagian bawah halaman dan, jika demikian, memuat lebih banyak data.

Metode kedua adalah menggulir, yang dipanggil React saat pengguna menggulir. Anda dapat menggunakan metode ini untuk melacak posisi gulir. Jika pengguna telah menggulir ke bagian bawah halaman, Anda dapat memuat lebih banyak data.

Berikut adalah contoh bagaimana Anda dapat menggunakan metode ini untuk menerapkan gulir tak terbatas:

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

Kode ini menggunakan kait useState dan useEffect untuk mengelola status dan efek samping.

Di hook useEffect, ia memanggil metode fetchData dengan halaman saat ini. Metode fetchData membuat panggilan API untuk mendapatkan beberapa data. Dalam contoh ini, Anda hanya membuat beberapa data dummy untuk mendemonstrasikan tekniknya.

Loop for mengisi array ItemBaru dengan 100 bilangan bulat. Jika parameter halaman adalah 100, setel flag hasMore ke false. Ini akan menghentikan komponen InfiniteScroll dari membuat panggilan API lebih lanjut. Terakhir, atur status dengan data baru.

Metode onScroll melacak posisi gulir. Jika pengguna telah menggulir ke bagian bawah halaman, Anda dapat memuat lebih banyak data.

Kait useEffect menambahkan pendengar acara untuk acara gulir. Saat acara gulir diaktifkan, itu memanggil metode onScroll.

bereaksi layar aplikasi dengan gulir tak terbatas menggunakan fitur bawaan

Ada pro dan kontra untuk menggunakan gulir tak terbatas. Ini dapat membantu meningkatkan antarmuka pengguna, menjadikan pengalaman lebih lancar, terutama pada perangkat seluler. Namun, ini juga dapat menyebabkan pengguna kehilangan konten karena mereka mungkin tidak cukup menggulir ke bawah untuk melihatnya.

Penting untuk menimbang pro dan kontra dari teknik gulir tak terbatas sebelum menerapkannya di situs web atau aplikasi Anda.

Menambahkan scroll tak terbatas ke situs web atau aplikasi React.js Anda dapat membantu meningkatkan pengalaman pengguna. Dengan pengguliran tak terbatas, pengguna tidak perlu mengeklik untuk melihat lebih banyak konten. Menggunakan Infinite Scroll di aplikasi React.js Anda juga dapat membantu mengurangi jumlah pemuatan halaman, yang dapat meningkatkan kinerja.

Anda juga dapat dengan mudah menerapkan aplikasi React ke halaman Github secara gratis.


https://www.makeuseof.com/react-infinite-scroll/

Leave a Comment