Rumah > Artikel > hujung hadapan web > Pemalam Pangkalan Data Pertanyaan React: Amalan Terbaik untuk Penomboran Data
Pemalam Pangkalan Data Pertanyaan React: Amalan Terbaik untuk Melaksanakan Penomboran Data
const fetchUsers = async (page) => { const response = await fetch(`/api/users?page=${page}`); const data = await response.json(); return data; }; const queryKeys = (page) => ['users', { page }];2 Gunakan useQuery untuk mendapatkan data Menggunakan fungsi cangkuk useQuery boleh mendapatkan data dengan mudah dan menggunakan mekanisme caching React Query untuk mengoptimumkan prestasi. Hanya masukkan fungsi pertanyaan dan kunci pertanyaan.
const UsersList = () => { const { isLoading, isError, data } = useQuery(queryKeys(page), fetchUsers); if (isLoading) { return <div>Loading...</div>; } if (isError) { return <div>Error loading data</div>; } return ( <ul> {data.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); };3. Mengendalikan logik paging Untuk melaksanakan paging, kami perlu menjejaki nombor halaman semasa dan menyediakan beberapa interaksi pengguna untuk menukar nombor halaman. Anda boleh menggunakan cangkuk useState untuk menentukan keadaan Halaman semasa dan mengemas kininya berdasarkan interaksi pengguna. Kemudian, kita boleh menggunakan currentPage sebagai parameter fungsi pertanyaan untuk mendapatkan data nombor halaman yang sepadan.
const UsersList = () => { const [currentPage, setCurrentPage] = useState(1); const { isLoading, isError, data } = useQuery(queryKeys(currentPage), fetchUsers); const handlePreviousPage = () => { setCurrentPage((prevPage) => prevPage - 1); }; const handleNextPage = () => { setCurrentPage((prevPage) => prevPage + 1); }; if (isLoading) { return <div>Loading...</div>; } if (isError) { return <div>Error loading data</div>; } return ( <div> <button onClick={handlePreviousPage} disabled={currentPage === 1}> Previous Page </button> <button onClick={handleNextPage}> Next Page </button> <ul> {data.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> </div> ); };4. Tambahkan caching dan prefetching dataReact Query menggunakan mekanisme berasaskan cache untuk memaksimumkan penggunaan cache untuk meningkatkan prestasi. Oleh itu, apabila halaman dimuatkan, data dicache secara automatik dan diambil daripada cache pada permintaan seterusnya. Selain itu, kami boleh menggunakan cangkuk useQueryPrefetch untuk pra-menyediakan data untuk halaman seterusnya terlebih dahulu supaya data boleh dimuatkan dengan lebih cepat apabila pengguna menukar nombor halaman.
const UsersList = () => { // ... const nextPageQuery = queryKeys(currentPage + 1); const prefetchNextPage = useQueryPrefetch(nextPageQuery, fetchUsers); const handleNextPage = () => { setCurrentPage((prevPage) => prevPage + 1); prefetchNextPage(); }; // ... };Melalui langkah di atas, kami boleh menggunakan React Query untuk melaksanakan halaman data dan mengoptimumkan prestasi dengan mudah. RingkasanArtikel ini memperkenalkan amalan terbaik untuk menggunakan React Query untuk melaksanakan halaman data, dan juga menyediakan beberapa contoh kod khusus. React Query menyediakan fungsi cangkuk yang mudah dan mekanisme caching, menjadikan pelaksanaan paging data mudah dan cekap. Dengan menggunakan React Query, kami boleh mengendalikan pengambilan semula, caching dan pengemaskinian data dengan lebih baik, sambil memberikan pengalaman pengguna dan prestasi aplikasi yang baik. Saya harap artikel ini telah memberikan panduan dan bantuan yang berharga untuk anda memahami dan menggunakan React Query untuk mengendalikan penomboran data.
Atas ialah kandungan terperinci Pemalam Pangkalan Data Pertanyaan React: Amalan Terbaik untuk Penomboran Data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!