Cara Menambahkan Gulir Tak Terbatas di React.js

Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.

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 pada 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 bisa gunakan Bereaksi kait untuk menambahkan fitur pengguliran tak terbatas.

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

npm Install bereaksi-tak terbatas-menggulir-komponen --menyimpan

Kemudian, Anda dapat mengimpornya ke dalam komponen React Anda.

impor Reaksi dari 'reaksi'
impor Gulir Tak Terbatas dari 'react-infinite-scroll-component'
kelasAplikasimemanjangReaksi.Komponen{
konstruktor() {
super()
ini.negara = {
item: [],
 hasMore: BENAR
 }
 }
componentDidMount() {
ini.fetchData(1)
 }
ambilData = (halaman) => {
const Item baru = []
untuk (membiarkan saya = 0; saya < 100; saya++) {
barang baru.dorongan(Saya )
 }
jika (halaman 100) {
ini.setState({ hasMore: PALSU })
 }
ini.setState({ item: [...this.state.items, ...newItems] })
 }
render() {
kembali (
<div>
<h1>Gulir Tak Terbatas</h1>
<Gulir Tak Terbatas
 panjangdata={ini.state.items.length}
 selanjutnya={ini.fetchData}
 hasMore={ini.state.hasSelengkapnya}
 pemuat={<h4>Memuat...</h4>}
 endMessage={
<p gaya={{ perataan teks: 'tengah' }}>
<B>Hore! Anda telah melihat semuanya</B>
</P>
 }
>
 {ini.state.items.map((item, indeks) => (
<kunci div={indeks}>
 {barang}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
eksporbawaan Aplikasi

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 hasMore 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 bendera hasMore. Prop loader menyebabkan komponen merender kontennya sebagai indikator pemuatan. Demikian pula, itu akan merender 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.

Menggunakan Fungsi Bawaan

React juga memiliki beberapa metode bawaan yang dapat Anda gunakan untuk mengimplementasikan pengguliran tak terbatas.

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 bisa menggunakan metode ini untuk mengimplementasikan pengguliran tak terbatas:

impor Bereaksi, {useState, useEffect} dari 'reaksi'
fungsiAplikasi() {
const [item, setItem] = useState([])
const [hasMore, setHasMore] = useState(BENAR)
const [halaman, setPage] = useState(1)
gunakanEfek(() => {
 ambilData (halaman)
 }, [halaman])
const fetchData = (halaman) => {
const Item baru = []
untuk (membiarkan saya = 0; saya < 100; saya++) {
barang baru.dorongan(Saya)
 }
jika (halaman 100) {
 setHasSelengkapnya(PALSU)
 }
setItems([...item, ...item baru])
 }
const onScroll = () => {
const scrollTop = dokumen.documentElement.scrollTop
const scrollHeight = dokumen.documentElement.scrollHeight
const tinggi klien = dokumen.documentElement.clientHeight
jika (scrollTop + clientHeight >= scrollTinggi) {
 setPage (halaman + 1)
 }
 }
gunakanEfek(() => {
 jendela.addEventListener('menggulir', di Gulir)
 kembali () => window.removeEventListener('menggulir', di Gulir)
 }, [barang])
kembali (
<div>
 {items.map((item, indeks) => (
<kunci div={indeks}>
 {barang}
</div>
 ))}
</div>
 )
}
eksporbawaan Aplikasi

Kode ini menggunakan hook 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, ia memanggil metode onScroll.

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 mempertimbangkan 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.