Tabel dan daftar yang sangat besar dapat memperlambat performa situs Anda secara signifikan. Virtualisasi dapat membantu!
react-window
adalah
library yang memungkinkan daftar besar dirender secara efisien.
Berikut ini contoh daftar yang berisi 1.000 baris yang dirender dengan
react-window
. Coba scroll secepat mungkin.
Mengapa hal ini bermanfaat?
Mungkin ada saatnya Anda perlu menampilkan tabel atau daftar besar yang berisi banyak baris. Memuat setiap item pada daftar tersebut dapat sangat memengaruhi performa.
Virtualisasi daftar, atau "windowing", adalah konsep untuk hanya merender apa yang terlihat oleh pengguna. Jumlah elemen yang dirender pertama kali adalah subset yang sangat kecil dari seluruh daftar, dan "jendela" konten yang terlihat akan bergerak saat pengguna terus men-scroll. Hal ini meningkatkan performa rendering dan scroll daftar.
![Jendela konten dalam daftar virtual](https://web.dev/static/articles/virtualize-long-lists-react-window/image/window-content-a-virtua-9c3c7f0cbf9a5.jpg?authuser=6&hl=id)
Node DOM yang keluar dari "jendela" didaur ulang, atau langsung diganti dengan elemen yang lebih baru saat pengguna men-scroll daftar ke bawah. Cara ini mempertahankan jumlah semua elemen yang dirender sesuai ukuran jendela.
jendela reaksi
react-window
adalah library kecil pihak ketiga yang memudahkan pembuatan daftar virtual di aplikasi Anda. Library ini menyediakan sejumlah API dasar
yang dapat digunakan untuk berbagai jenis daftar dan tabel.
Kapan menggunakan daftar ukuran tetap
Gunakan komponen FixedSizeList
jika Anda memiliki daftar panjang satu dimensi
yang berisi item yang berukuran sama.
import React from 'react';
import { FixedSizeList } from 'react-window';
const items = [...] // some list of items
const Row = ({ index, style }) => (
<div style={style}>
{/* define the row component using items[index] */}
</div>
);
const ListComponent = () => (
<FixedSizeList
height={500}
width={500}
itemSize={120}
itemCount={items.length}
>
{Row}
</FixedSizeList>
);
export default ListComponent;
- Komponen
FixedSizeList
menerima propertiheight
,width
, danitemSize
untuk mengontrol ukuran item dalam daftar. - Fungsi yang merender baris diteruskan sebagai turunan ke
FixedSizeList
. Detail tentang item tertentu dapat diakses menggunakan argumenindex
(items[index]
). - Parameter
style
juga diteruskan ke metode rendering baris yang harus dilampirkan ke elemen baris. Item daftar benar-benar diposisikan dengan nilai tinggi dan lebar yang ditetapkan inline, dan parameterstyle
bertanggung jawab atas hal ini.
Contoh Glitch yang ditampilkan sebelumnya dalam artikel ini menunjukkan contoh
komponen FixedSizeList
.
Kapan harus menggunakan daftar berukuran variabel
Gunakan komponen VariableSizeList
untuk merender daftar item yang memiliki
ukuran berbeda. Komponen ini berfungsi dengan cara yang sama seperti daftar ukuran tetap, tetapi
mengharapkan fungsi untuk properti itemSize
, bukan nilai tertentu.
import React from 'react';
import { VariableSizeList } from 'react-window';
const items = [...] // some list of items
const Row = ({ index, style }) => (
<div style={style}>
{/* define the row component using items[index] */}
</div>
);
const getItemSize = index => {
// return a size for items[index]
}
const ListComponent = () => (
<VariableSizeList
height={500}
width={500}
itemCount={items.length}
itemSize={getItemSize}
>
{Row}
</VariableSizeList>
);
export default ListComponent;
Penyematan berikut menunjukkan contoh komponen ini.
Fungsi ukuran item yang diteruskan ke properti itemSize
akan mengacak tinggi baris
dalam contoh ini. Namun, dalam aplikasi yang sebenarnya, harus ada logika sebenarnya
yang menentukan ukuran setiap item. Idealnya, ukuran ini harus dihitung berdasarkan
data atau diperoleh dari API.
Petak
react-window
juga memberikan dukungan untuk memvirtualisasikan daftar atau petak multi-dimensi. Dalam konteks ini, "jendela" konten yang terlihat akan berubah saat pengguna
men-scroll secara horizontal dan vertikal.
![Memindahkan jendela konten dalam petak virtual berbentuk dua dimensi](https://web.dev/static/articles/virtualize-long-lists-react-window/image/moving-window-content-a-3393c2a96ff59.jpg?authuser=6&hl=id)
Demikian pula, komponen FixedSizeGrid
dan VariableSizeGrid
dapat digunakan
bergantung pada apakah ukuran item daftar tertentu dapat bervariasi atau tidak.
- Untuk
FixedSizeGrid
, API-nya hampir sama, tetapi dengan fakta bahwa tinggi, lebar, dan jumlah item harus direpresentasikan untuk kolom dan baris. - Untuk
VariableSizeGrid
, lebar kolom dan tinggi baris dapat diubah dengan meneruskan fungsi, bukan nilai, ke propertinya masing-masing.
Lihat dokumentasi untuk melihat contoh grid virtual.
Pemuatan lambat saat men-scroll
Banyak situs meningkatkan performa dengan menunggu untuk memuat dan merender item dalam daftar panjang hingga pengguna men-scroll ke bawah. Teknik ini, biasanya disebut sebagai "pemuatan tanpa batas", menambahkan node DOM baru ke dalam daftar saat pengguna men-scroll melewati batas tertentu yang mendekati bagian akhir. Meskipun cara ini lebih baik daripada memuat semua item pada daftar sekaligus, namun pada akhirnya DOM tetap terisi dengan ribuan entri baris jika pengguna telah men-scroll melewati jumlah tersebut. Hal ini dapat menyebabkan ukuran DOM yang terlalu besar, yang mulai memengaruhi performa dengan memperlambat penghitungan gaya dan mutasi DOM.
Diagram berikut dapat membantu meringkas hal ini:
![Perbedaan antara men-scroll antara daftar reguler dan tervirtualisasi](https://web.dev/static/articles/virtualize-long-lists-react-window/image/difference-scrolling-bet-517c003019905.jpg?authuser=6&hl=id)
Pendekatan terbaik untuk mengatasi masalah ini adalah terus menggunakan library seperti
react-window
untuk mempertahankan "jendela" elemen yang kecil di halaman, tetapi juga
memuat lambat entri baru saat pengguna men-scroll ke bawah. Paket terpisah,
react-window-infinite-loader
, memungkinkan hal ini dengan react-window
.
Pertimbangkan bagian kode berikut yang menunjukkan contoh status yang
dikelola dalam komponen App
induk.
import React, { Component } from 'react';
import ListComponent from './ListComponent';
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: [], // instantiate initial list here
moreItemsLoading: false,
hasNextPage: true
};
this.loadMore = this.loadMore.bind(this);
}
loadMore() {
// method to fetch newer entries for the list
}
render() {
const { items, moreItemsLoading, hasNextPage } = this.state;
return (
<ListComponent
items={items}
moreItemsLoading={moreItemsLoading}
loadMore={this.loadMore}
hasNextPage={hasNextPage}
/>
);
}
}
export default App;
Metode loadMore
diteruskan ke ListComponent
turunan yang berisi
daftar loader tanpa batas. Hal ini penting karena loader tanpa batas perlu
mengaktifkan callback untuk memuat lebih banyak item setelah pengguna men-scroll melewati titik
tertentu.
Berikut tampilan ListComponent
yang merender daftar:
import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from "react-window-infinite-loader";
const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
const Row = ({ index, style }) => (
{/* define the row component using items[index] */}
);
const itemCount = hasNextPage ? items.length + 1 : items.length;
return (
<InfiniteLoader
isItemLoaded={index => index < items.length}
itemCount={itemCount}
loadMoreItems={loadMore}
>
{({ onItemsRendered, ref }) => (
<FixedSizeList
height={500}
width={500}
itemCount={itemCount}
itemSize={120}
onItemsRendered={onItemsRendered}
ref={ref}
>
{Row}
</FixedSizeList>
)}
</InfiniteLoader>
)
};
export default ListComponent;
Di sini, komponen FixedSizeList
digabungkan di dalam InfiniteLoader
.
Properti yang ditetapkan untuk loader adalah:
isItemLoaded
: Metode yang memeriksa apakah item tertentu telah dimuatitemCount
: Jumlah item dalam daftar (atau diharapkan)loadMoreItems
: Callback yang menampilkan promise yang di-resolve ke data tambahan untuk daftar
Properti render digunakan untuk menampilkan fungsi yang digunakan komponen daftar untuk dirender.
Atribut onItemsRendered
dan ref
adalah atribut yang perlu
diteruskan.
Berikut adalah contoh cara kerja pemuatan tanpa batas dengan daftar virtual.
Men-scroll ke bawah daftar mungkin terasa sama, tetapi permintaan kini dibuat untuk mengambil 10 pengguna dari API pengguna acak setiap kali Anda men-scroll mendekati akhir daftar. Ini semua dilakukan sambil hanya merender satu "jendela" hasil dalam satu waktu.
Dengan memeriksa index
item tertentu, status pemuatan yang berbeda dapat
ditampilkan untuk item, bergantung pada apakah permintaan telah dibuat untuk entri yang lebih baru
dan item tersebut masih dimuat.
Contoh:
const Row = ({ index, style }) => {
const itemLoading = index === items.length;
if (itemLoading) {
// return loading state
} else {
// return item
}
};
Pemindaian berlebihan
Karena item dalam daftar virtual hanya berubah saat pengguna men-scroll, ruang kosong dapat berkedip sebentar saat entri baru akan ditampilkan. Anda dapat mencoba men-scroll dengan cepat contoh sebelumnya dalam panduan ini untuk melihat hal ini.
Untuk meningkatkan pengalaman pengguna daftar virtual, react-window
memungkinkan
Anda melakukan pemindaian item secara berlebih dengan properti overscanCount
. Hal ini memungkinkan Anda
menentukan jumlah item di luar "jendela" yang terlihat untuk selalu dirender.
<FixedSizeList
//...
overscanCount={4}
>
{...}
</FixedSizeList>
overscanCount
berfungsi untuk komponen FixedSizeList
dan VariableSizeList
dan memiliki nilai default 1. Bergantung pada seberapa besar daftar
serta ukuran setiap item, melakukan pemindaian berlebih lebih dari satu entri dapat
membantu mencegah flash yang terlihat pada ruang kosong saat pengguna men-scroll. Namun,
overscan terlalu banyak entri dapat berdampak negatif pada performa. Inti
penggunaan daftar virtual adalah meminimalkan jumlah entri terhadap
apa yang dapat dilihat pengguna pada saat tertentu, jadi cobalah untuk menjaga jumlah item yang dipindai
serendah mungkin.
Untuk FixedSizeGrid
dan VariableSizeGrid
, gunakan properti overscanColumnsCount
dan
overscanRowsCount
masing-masing untuk mengontrol jumlah kolom dan baris yang akan
di-overscan.
Kesimpulan
Jika Anda tidak yakin harus mulai melakukan virtualisasi daftar dan tabel dalam aplikasi, ikuti langkah-langkah berikut:
- Mengukur performa rendering dan scroll. Artikel ini menunjukkan cara menggunakan meter FPS di Chrome DevTools untuk mempelajari seberapa efisien item dirender pada daftar.
- Sertakan
react-window
untuk daftar panjang atau petak yang memengaruhi performa. - Jika ada fitur tertentu yang tidak didukung di
react-window
, pertimbangkan untuk menggunakanreact-virtualized
jika Anda tidak dapat menambahkan fungsi ini sendiri. - Gabungkan daftar virtual dengan
react-window-infinite-loader
jika Anda perlu memuat item dengan lambat saat pengguna men-scroll. - Gunakan properti
overscanCount
untuk daftar serta propertioverscanColumnsCount
danoverscanRowsCount
untuk petak Anda guna mencegah flash konten kosong. Jangan memindai terlalu banyak entri karena tindakan ini akan berdampak negatif pada performa.