Mengoptimumkan pertanyaan pangkalan data dengan React Query: cara untuk meningkatkan prestasi aplikasi

Mengoptimumkan pertanyaan pangkalan data dengan React Query: Cara untuk meningkatkan prestasi aplikasi

Ikhtisar:
Apabila membangunkan aplikasi web moden, data pemerolehan dan operasi adalah pautan yang sangat penting. Dengan perkembangan teknologi bahagian hadapan, interaksi antara aplikasi bahagian hadapan dan pangkalan data bahagian belakang menjadi semakin kerap. React Query ialah perpustakaan pengurusan keadaan data yang berkuasa yang menggabungkan React Hooks dan mekanisme caching yang berkuasa untuk menjadikan pertanyaan dan operasi data lebih cekap. Walau bagaimanapun, apabila jumlah data meningkat, pengoptimuman prestasi pertanyaan pangkalan data menjadi semakin kritikal. Artikel ini akan memperkenalkan beberapa kaedah untuk mengoptimumkan pertanyaan pangkalan data React Query untuk membantu anda meningkatkan prestasi aplikasi.

1 Gunakan mekanisme caching untuk mengurangkan kekerapan pertanyaan pangkalan data
React Query mempunyai mekanisme caching terbina dalam yang boleh menyimpan data dalam memori untuk mengelakkan pertanyaan pangkalan data berulang. Apabila menggunakan React Query untuk pertanyaan data, anda boleh mengawal kekerapan kemas kini data dengan menetapkan masa cache. Berikut ialah kod sampel:

import { useQuery } from 'react-query';

function UserList() {
  const { data, isLoading } = useQuery('users', fetchUsers, {
    cacheTime: 60000, // 缓存时间为 1 分钟
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Dalam kod di atas, parameter cacheTime mengawal tempoh sah cache. Apabila data melebihi masa cache, React Query akan memulakan semula pertanyaan pangkalan data secara automatik. cacheTime 参数控制了缓存的有效期。当数据超过缓存时间后，React Query 会自动重新发起数据库查询。

二、使用数据预取提前获取数据
React Query 支持数据预取的功能，可以在页面加载时提前获取数据，避免用户首次加载时的网络延迟。下面是一个示例代码：

import { useQueryClient } from 'react-query';

function UserList() {
  const queryClient = useQueryClient();

  useEffect(() => {
    queryClient.prefetchQuery('users', fetchUsers);
  }, []);

  const { data, isLoading } = useQuery('users', fetchUsers);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

在上述代码中，useEffect 钩子函数用于在组件挂载时调用 prefetchQuery 方法，提前获取数据。然后，在 useQuery 中正常查询数据。

三、使用数据变更订阅更新 UI
使用 React Query 的 useQuerySubscription 可以订阅数据库的数据变更，实时更新 UI。考虑下面的例子：

import { useQuery, useQuerySubscription } from 'react-query';

function UserList() {
  const { data, isLoading } = useQuery('users', fetchUsers);

  useQuerySubscription('users');

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

上述代码中，在 useQuery 后面调用了 useQuerySubscription，实现了对数据变更的订阅。当数据库发生变更时，useQuerySubscription 会立即更新 UI。

四、合理使用查询键
在使用 React Query 进行数据查询时，使用合适的查询键也可以提升性能。查询键是一个字符串参数，用来区分不同的查询。当查询键发生变化时，React Query 会重新发起数据库查询。合理使用查询键，可以控制数据的粒度，避免不必要的数据库查询。考虑下面的例子：

import { useQuery } from 'react-query';

function UserList({ status }) {
  const { data, isLoading } = useQuery(['users', status], fetchUsers);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

上述代码中，查询键由两部分组成：users 和 status。当 status

2. Gunakan prefetching data untuk mendapatkan data lebih awal

React Query menyokong fungsi prefetching data, yang boleh mendapatkan data lebih awal apabila halaman dimuatkan untuk mengelakkan kelewatan rangkaian apabila pengguna memuatkan kali pertama. Berikut ialah kod sampel:
rrreee

Dalam kod di atas, fungsi cangkuk useEffect digunakan untuk memanggil kaedah prefetchQuery apabila komponen sedang dipasang untuk mendapatkannya terlebih dahulu. Kemudian, tanya data seperti biasa dalam useQuery. #🎜🎜##🎜🎜#3. Gunakan langganan perubahan data untuk mengemas kini UI#🎜🎜#Gunakan useQuerySubscription untuk melanggan perubahan data pangkalan data dan mengemas kini UI dalam masa nyata. Pertimbangkan contoh berikut: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, useQuerySubscription dipanggil selepas useQuery untuk melaksanakan langganan kepada perubahan data. useQuerySubscription mengemas kini UI serta-merta apabila pangkalan data berubah. #🎜🎜##🎜🎜#4 Penggunaan munasabah kekunci pertanyaan #🎜🎜# Apabila menggunakan React Query untuk pertanyaan data, menggunakan kekunci pertanyaan yang sesuai juga boleh meningkatkan prestasi. Kunci pertanyaan ialah parameter rentetan yang digunakan untuk membezakan pertanyaan yang berbeza. Apabila kunci pertanyaan berubah, React Query akan memulakan semula pertanyaan pangkalan data. Penggunaan munasabah kunci pertanyaan boleh mengawal butiran data dan mengelakkan pertanyaan pangkalan data yang tidak diperlukan. Pertimbangkan contoh berikut: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kunci pertanyaan terdiri daripada dua bahagian: pengguna dan status. Apabila status berubah, React Query akan memulakan semula pertanyaan pangkalan data. #🎜🎜##🎜🎜#Kesimpulan: #🎜🎜# Dengan secara rasional menggunakan mekanisme caching, pengambilan data, langganan perubahan data dan kunci pertanyaan, pertanyaan pangkalan data React Query boleh dioptimumkan dan prestasi aplikasi dipertingkatkan. Kaedah ini boleh mengurangkan kekerapan pertanyaan pangkalan data, mengurangkan kependaman rangkaian dan mendayakan kemas kini masa nyata pada UI. Semasa proses pembangunan, memilih kaedah pengoptimuman yang sesuai mengikut situasi tertentu boleh membolehkan aplikasi memperoleh dan mengendalikan data dengan lebih cekap. Mari bina aplikasi web yang lebih baik dengan React Query! #🎜🎜#

Atas ialah kandungan terperinci Mengoptimumkan pertanyaan pangkalan data dengan React Query: cara untuk meningkatkan prestasi aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!