Petua untuk mengoptimumkan prestasi pertanyaan pangkalan data dalam React Query

Petua untuk mengoptimumkan prestasi pertanyaan pangkalan data dalam React Query

React Query ialah perpustakaan pengurusan data yang berkuasa yang menyediakan banyak alatan mudah untuk mengoptimumkan prestasi aplikasi bahagian hadapan. Antaranya, mengoptimumkan prestasi pertanyaan pangkalan data adalah aspek penting yang patut diberi perhatian. Dalam artikel ini, kami akan membincangkan beberapa petua untuk mengoptimumkan prestasi pertanyaan pangkalan data dalam React Query, bersama-sama dengan contoh kod konkrit.

1. Pertanyaan kelompok

Dalam React Query, adalah amalan biasa untuk menggunakan fungsi useQueryhook untuk melaksanakan pertanyaan data tunggal. Walau bagaimanapun, apabila kita perlu menanyakan berbilang data yang serupa, menggunakan pertanyaan kelompok boleh meningkatkan prestasi dengan ketara. Dengan mengambil maklumat berbilang pengguna daripada pangkalan data sebagai contoh, kami boleh mendapatkan maklumat pengguna dalam kelompok dengan menghantar tatasusunan yang mengandungi semua ID pengguna, bukannya menanyakan setiap pengguna secara berasingan.

import { useQuery } from 'react-query';

const getUsers = async (ids) => {
  const response = await fetch(`/api/users?ids=${ids.join(',')}`);
  const data = await response.json();
  return data;
};

const UserList = () => {
  const userIds = [1, 2, 3, 4, 5];
  const { data } = useQuery(['users', userIds], () => getUsers(userIds));
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

2. Caching data

Secara lalai, React Query menyimpan cache data yang dikembalikan oleh pertanyaan dalam memori untuk digunakan dalam pemaparan komponen seterusnya. Ini bermakna jika berbilang komponen perlu menggunakan hasil pertanyaan yang sama, React Query hanya akan melaksanakan pertanyaan sekali sahaja dan berbilang komponen akan berkongsi data yang sama. Mekanisme caching data ini boleh mengurangkan pertanyaan pangkalan data yang tidak diperlukan dengan ketara dan meningkatkan prestasi.

const UserProfile = ({ userId }) => {
  const { data } = useQuery(['user', userId], () => getUser(userId));
  
  return (
    <div>
      <h2>{data.name}</h2>
      <p>{data.email}</p>
      <p>{data.bio}</p>
    </div>
  );
};

const UserPage = () => {
  const userIds = [1, 2, 3, 4, 5];
  
  return (
    <div>
      <h1>User Page</h1>
      {userIds.map(userId => (
        <UserProfile key={userId} userId={userId} />
      ))}
    </div>
  );
};

3. Data prefetch

Untuk sesetengah data yang perlu dimuatkan terlebih dahulu, menggunakan fungsi data prefetch boleh mempercepatkan kelajuan memuatkan halaman. React Query menyokong data pra-pengambilan sebelum pemaparan komponen dan menyimpannya secara setempat. Dengan cara ini, apabila komponen membuat, data yang diperlukan sudah ada dalam cache dan tiada pertanyaan tambahan diperlukan.

import { useQueryClient } from 'react-query';

const Home = () => {
  const queryClient = useQueryClient();
  
  useEffect(() => {
    queryClient.prefetchQuery('users', getUsers);
    queryClient.prefetchQuery('posts', getPosts);
  }, []);
  
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

4. Kemas kini data

Selepas operasi kemas kini pangkalan data selesai, React Query boleh mengemas kini data komponen berkaitan secara automatik dan memaparkan semula. Ini bermakna kita tidak perlu mencetuskan operasi kemas kini secara manual dan proses kemas kini data dirangkumkan di dalam React Query. Dengan cara ini, kami boleh memberi tumpuan kepada pelaksanaan logik perniagaan tanpa perlu risau tentang konsistensi data.

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

const updateUser = async (userId, newData) => {
  const response = await fetch(`/api/users/${userId}`, {
    method: 'PUT',
    body: JSON.stringify(newData),
    headers: { 'Content-Type': 'application/json' },
  });
  
  if (!response.ok) {
    throw new Error('更新用户失败');
  }
};

const UserProfile = ({ userId }) => {
  const queryClient = useQueryClient();
  
  const { data } = useQuery(['user', userId], () => getUser(userId));

  const updateUserMutation = useMutation(newData => updateUser(userId, newData), {
    onSuccess: () => {
      queryClient.invalidateQueries(['user', userId]);
    },
  });
  
  const handleUpdateUser = (newData) => {
    updateUserMutation.mutate(newData);
  };
  
  return (
    <div>
      <h2>{data.name}</h2>
      <p>{data.email}</p>
      <p>{data.bio}</p>
      <button onClick={() => handleUpdateUser({ name: 'new name' })}>
        更新用户
      </button>
    </div>
  );
};

Di atas ialah beberapa petua dan contoh kod biasa untuk mengoptimumkan prestasi pertanyaan pangkalan data dalam React Query. Melalui pertanyaan kelompok, cache data, pengambilan data dan kemas kini data, kami boleh meningkatkan prestasi aplikasi bahagian hadapan dengan ketara sambil mengurangkan pertanyaan pangkalan data yang tidak perlu. Saya harap artikel ini dapat memberikan bantuan dan panduan untuk anda mengoptimumkan pertanyaan pangkalan data dalam React Query.

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