Pernahkah Anda menemukan situs web atau aplikasi yang memuat dan menampilkan lebih banyak konten saat Anda menggulir? Inilah yang kami sebut gulir tak terbatas.
Gulir tak terbatas adalah teknik populer yang dapat mempermudah penelusuran konten dalam jumlah besar. Hal ini juga dapat memberikan pengalaman pengguna yang lebih lancar, terutama pada perangkat seluler.
Anda dapat mengimplementasikan pengguliran tak terbatas di React dengan beberapa cara berbeda. Yang pertama adalah menggunakan perpustakaan seperti react-infinite-scroll-component. Komponen perpustakaan ini memicu peristiwa setiap kali pengguna menggulir ke bagian bawah halaman. Anda kemudian dapat menggunakan peristiwa ini sebagai isyarat untuk memuat lebih banyak konten.
Cara lain untuk mengimplementasikan pengguliran tak terbatas di React adalah melalui fungsi bawaannya. Salah satu fungsi tersebut adalah “componentDidMount,” yang dipanggil React saat pertama kali memasang komponen.
Anda dapat menggunakan fungsi ini untuk memuat kumpulan data pertama, diikuti dengan fungsi “componentDidUpdate” untuk memuat data berikutnya saat pengguna menggulir ke bawah.
Anda juga dapat menggunakan React hooks untuk menambahkan fitur pengguliran tak terbatas.
Ada beberapa cara untuk menggunakan komponen react-infinite-scroll.
Daftar isi
Instal komponen gulir reaksi-tak terbatas
Untuk memulai penggunaan, Anda harus menginstalnya terlebih dahulu melalui npm:
npm install react-infinite-scroll-component --save
Impor komponen react-infinite-scroll ke React
Setelah instalasi, Anda perlu mengimpor pustaka gulir tak terbatas 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. Ia kemudian membuat komponen stateful dan menginisialisasinya dengan array item kosong dan flag hasMore yang disetel ke True.
Tetapkan Parameter
Dalam metode siklus hidup ComponentDidMount, Anda harus memanggil metode FetchData dengan parameter halaman yang disetel ke 1. Metode FetchData membuat panggilan API untuk mengambil data. Contoh penggulung reaksi tak terbatas ini menghasilkan beberapa data tiruan dan membuat larik 100 item.
Setelah parameter halaman mencapai 100, karena tidak ada item lagi, Anda dapat menyetel tanda hasMore ke False. Ini menghentikan komponen InfiniteScroll membuat panggilan API lebih lanjut. Terakhir, atur status menggunakan data baru.
Metode render menggunakan komponen InfiniteScroll dan meneruskan beberapa props. Prop dataLength diatur ke panjang array item. Prop berikut disetel ke metode FetchData. Prop hasMore disetel sama dengan flag hasMore.
Prop loader menyebabkan komponen merender kontennya sebagai indikator pemuatan. Demikian pula, ia akan merender prop endMessage sebagai pesan ketika semua data telah selesai dimuat.
Anda dapat meneruskan props lain ke komponen InfiniteScroll, namun props inilah yang paling sering Anda gunakan.
Menggunakan Fungsi Bawaan
React juga memiliki beberapa metode bawaan yang dapat Anda gunakan untuk mengimplementasikan InfiniteScroll.
Metode pertama adalah komponenDidUpdate. React memanggil metode ini setelah memperbarui komponen. Anda dapat menggunakan metode ini untuk memeriksa apakah pengguna telah menggulir ke bagian bawah halaman. Jika ya, ini memuat lebih banyak data.
Metode kedua adalah scroll, yang dipanggil React saat pengguna melakukan scroll. Anda dapat menggunakan metode ini untuk melacak posisi gulir. Anda dapat memuat lebih banyak data jika pengguna telah menggulir ke bagian bawah halaman.
Berikut adalah contoh React infinite scroll yang menunjukkan cara menggunakan metode ini:
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.
Dalam hook useEffect, ia memanggil metode FetchData dengan halaman saat ini. Metode FetchData membuat panggilan API untuk mengambil data. Dalam contoh ini, Anda hanya membuat beberapa data dummy untuk mendemonstrasikan teknik tersebut.
Perulangan for mengisi array newItems dengan 100 bilangan bulat. Jika parameter halaman adalah 100, ini menyetel tanda hasMore ke False. Hal ini menghentikan komponen gulir tak terbatas untuk membuat panggilan API lebih lanjut.
Terakhir, atur status dengan data baru.
Metode onScroll melacak posisi gulir. Anda dapat memuat lebih banyak data jika pengguna menggulir ke bagian bawah halaman.
Kait useEffect menambahkan pendengar acara untuk acara gulir. Saat peristiwa gulir diaktifkan, ia memanggil metode onScroll.
Ada pro dan kontra dalam menggunakan gulungan tak terbatas React. Ini meningkatkan antarmuka pengguna, sehingga memberikan pengalaman yang lebih lancar, terutama pada perangkat seluler. Namun, hal ini juga dapat menyebabkan pengguna kehilangan konten karena mereka mungkin tidak menggulir ke bawah cukup jauh untuk melihatnya.
Penting untuk mempertimbangkan pro dan kontra dari teknik gulir tak terbatas sebelum menerapkannya di situs web atau aplikasi Anda.
Menambahkan gulir tak terbatas ke situs web atau aplikasi React.js Anda dapat meningkatkan pengalaman pengguna. Dengan gulir tanpa batas, pengguna tidak perlu mengklik untuk melihat konten lainnya. Menggunakan Infinite Scroll di aplikasi React.js Anda dapat mengurangi jumlah pemuatan halaman, yang selanjutnya meningkatkan kinerja.
Anda juga dapat dengan mudah menerapkan aplikasi React Anda ke halaman Github secara gratis.
