Pemalam Pangkalan Data Pertanyaan React: Amalan Terbaik untuk Penomboran Data-tutorial js-php.cn

Pemalam Pangkalan Data Pertanyaan React: Amalan Terbaik untuk Penomboran Data

王林

Lepaskan： 2023-09-26 11:24:11

asal

1502 orang telah melayarinya

React Query 数据库插件：实现数据分页的最佳实践

Pemalam Pangkalan Data Pertanyaan React: Amalan Terbaik untuk Melaksanakan Penomboran Data

Pengenalan

#🎜Act🎜 adalah ciri perpustakaan pengurusan negeri yang berkuasa untuk pengurusan data dalam aplikasi React. Ia menyediakan cara yang mudah dan intuitif untuk mengendalikan pemerolehan data, caching, pengemaskinian dan penyegerakan, dan sangat sesuai untuk mengendalikan senario halaman data. Dalam artikel ini, kami akan meneroka amalan terbaik untuk menomborkan data dengan React Query, sambil memberikan beberapa contoh kod konkrit.

React Query Pengenalan

React Query menyediakan penyelesaian pemerolehan dan pengurusan data berdasarkan React Hooks. Ia boleh mengendalikan pengambilan semula, caching dan pengemaskinian data dengan mudah, dan menyokong pertanyaan dan penapisan data, serta mengendalikan fungsi seperti penyegerakan data dan pengendalian ralat. React Query juga menggunakan mekanisme berasaskan cache yang memaksimumkan prestasi cache dan mengurangkan permintaan rangkaian sambil mengekalkan konsistensi data.

Keperluan untuk paging data

Dalam kebanyakan aplikasi, data biasanya perlu dimuatkan mengikut halaman. Apabila jumlah data adalah besar, memuatkan semua data sekaligus boleh menyebabkan isu prestasi dan meningkatkan kos penghantaran rangkaian. Oleh itu, memuatkan data dalam halaman ialah amalan biasa yang meningkatkan pengalaman pengguna dan prestasi keseluruhan aplikasi anda.

Amalan terbaik untuk melaksanakan halaman data dengan React Query

Berikut ialah beberapa amalan terbaik untuk melaksanakan halaman data menggunakan React Query:

1 fungsi React Query

Pertama, kita perlu menyediakan fungsi pertanyaan React Query untuk mendapatkan data. Fungsi pertanyaan harus termasuk parameter untuk menentukan nombor halaman semasa (halaman) dan mendapatkan data yang sepadan berdasarkan nombor halaman. Pada masa yang sama, kami boleh menggunakan QueryKeys untuk menentukan kunci unik bagi setiap permintaan untuk cache data dan pertanyaan.

const fetchUsers = async (page) => {
  const response = await fetch(`/api/users?page=${page}`);
  const data = await response.json();
  return data;
};

const queryKeys = (page) => ['users', { page }];

Salin selepas log masuk

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>
  );
};

Salin selepas log masuk

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>
  );
};

Salin selepas log masuk

4. Tambahkan caching dan prefetching data

React 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();
  };

  // ...
};

Salin selepas log masuk

Melalui langkah di atas, kami boleh menggunakan React Query untuk melaksanakan halaman data dan mengoptimumkan prestasi dengan mudah.

Ringkasan

Artikel 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!