Strategi prestasi bahagian hadapan untuk mengoptimumkan pertanyaan pangkalan data dalam React Query-tutorial js-php.cn

Strategi prestasi bahagian hadapan untuk mengoptimumkan pertanyaan pangkalan data dalam React Query

WBOY

Lepaskan： 2023-09-26 11:38:05

asal

1499 orang telah melayarinya

在 React Query 中优化数据库查询的前端性能策略

Strategi prestasi bahagian hadapan untuk mengoptimumkan pertanyaan pangkalan data dalam React Query

Dalam pembangunan front-end moden, kita sering perlu berinteraksi dengan pangkalan data belakang Berinteraksi dan dapatkan data untuk memaparkan halaman. Walau bagaimanapun, pertanyaan pangkalan data yang kerap boleh menyebabkan masalah prestasi, terutamanya apabila halaman perlu memaparkan sejumlah besar data. Dalam kes ini, kita boleh menggunakan React Query untuk mengoptimumkan prestasi bahagian hadapan pertanyaan pangkalan data.

React Query ialah perpustakaan JavaScript untuk mengurus pertanyaan dan keadaan data. Ia menyediakan cara mudah berasaskan cangkuk untuk membuat pertanyaan dan cache data. Dengan menggunakan React Query, kami boleh mengurangkan bilangan permintaan data dan kerumitan perkongsian data antara komponen.

Jadi, bagaimana untuk mengoptimumkan prestasi bahagian hadapan pertanyaan pangkalan data dalam React Query? Di bawah ini kami akan meneroka beberapa strategi khusus dan memberikan contoh kod.

Cache data

React Query mempunyai mekanisme caching data terbina dalam yang boleh cache data yang diperolehi dalam ingatan untuk digunakan semula kemudian. Dengan cara ini, pada kali berikutnya data yang sama disoal, tidak perlu menghantar permintaan ke pangkalan data belakang sekali lagi, sekali gus meningkatkan prestasi.

Berikut ialah contoh yang menunjukkan cara menggunakan mekanisme caching dalam React Query:

import { useQuery } from 'react-query';

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

const UserProfile = ({ userId }) => {
  const { data } = useQuery(['user', userId], () => fetchUserData(userId));
  
  // 渲染用户数据
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
};

Salin selepas log masuk

Dalam contoh ini, kami menggunakan cangkuk useQuery untuk Dapatkan data pengguna dan gunakan userId data sebagai kunci pertanyaan. React Query akan secara automatik cache hasil pertanyaan ini supaya ia boleh digunakan secara langsung pada kali seterusnya anda menanyakan data yang sama. useQuery 钩子来获取用户数据，并将数据的 userId 作为查询键。React Query 会自动缓存这个查询的结果，以便在下次查询同样的数据时直接使用。

合并多个查询

有时，我们可能需要同时查询多个数据，例如获取用户的个人信息和订单信息。在这种情况下，我们可以使用 useQueries 钩子来合并多个查询。这样一来，React Query 可以将这些查询同时发送到后端，并在所有查询都完成后返回结果。

下面是一个示例，展示了如何在 React Query 中合并多个查询：

import { useQueries } from 'react-query';

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

const fetchOrderData = async (userId) => {
  const response = await fetch(`/api/orders?userId=${userId}`);
  const data = await response.json();
  return data;
};

const UserProfile = ({ userId }) => {
  const queries = useQueries([
    { queryKey: ['user', userId], queryFn: () => fetchUserData(userId) },
    { queryKey: ['orders', userId], queryFn: () => fetchOrderData(userId) },
  ]);

  const userData = queries[0].data;
  const orderData = queries[1].data;

  // 渲染用户数据和订单数据
  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.bio}</p>
      
      <h2>订单信息</h2>
      <ul>
        {orderData.map(order => (
          <li key={order.id}>{order.name}</li>
        ))}
      </ul>
    </div>
  );
};

Salin selepas log masuk

在这个示例中，我们使用 useQueries 钩子同时发送多个查询，并将查询的结果分别存储在 userData 和 orderData 变量中。

通过合并多个查询，我们可以减少与后端的交互次数，提高性能。

预取和更新数据

React Query 还提供了一些钩子和函数，以便在组件初始化时预取数据，并在后续用户操作时更新数据。

例如，我们可以使用 useQueryClient 钩子来获取 QueryClient 实例，并使用其 prefetchQuery 函数来预取数据。这样一来，即使用户尚未点击获取数据的按钮，我们的应用也可以在后台获取数据，并保持最新的状态。

下面是一个示例，展示了如何在 React Query 中使用预取数据：

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

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

const UserProfile = ({ userId }) => {
  const queryClient = useQueryClient();

  queryClient.prefetchQuery(['user', userId], () => fetchUserData(userId));

  const { data } = useQuery(['user', userId], () => fetchUserData(userId));

  // 渲染用户数据
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
};

Salin selepas log masuk

在这个示例中，我们使用 useQueryClient 钩子获取 QueryClient 实例，并调用 prefetchQuery 函数来预取用户数据。然后，我们使用 useQuery

Kadangkala, kami mungkin perlu menanyakan berbilang data pada masa yang sama, seperti mendapatkan pengguna maklumat peribadi dan maklumat Pesanan. Dalam kes ini, kita boleh menggunakan cangkuk useQueries untuk menggabungkan berbilang pertanyaan. Dengan cara ini, React Query boleh menghantar pertanyaan ini ke bahagian belakang secara serentak dan mengembalikan keputusan selepas semua pertanyaan selesai.

Berikut ialah contoh yang menunjukkan cara menggabungkan berbilang pertanyaan dalam React Query:

useQueries

userData

orderData

useQueryClient

prefetchQuery

useQueryClient

prefetchQuery

useQuery

Atas ialah kandungan terperinci Strategi prestasi bahagian hadapan untuk mengoptimumkan pertanyaan pangkalan data dalam React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!