Conseils pour optimiser les performances des requêtes de base de données dans React Query

Conseils pour optimiser les performances des requêtes de base de données dans React Query

React Query est une puissante bibliothèque de gestion de données qui fournit de nombreux outils pratiques pour optimiser les performances des applications frontales. Parmi eux, l’optimisation des performances des requêtes de base de données est un aspect important qui mérite l’attention. Dans cet article, nous aborderons quelques conseils pour optimiser les performances des requêtes de base de données dans React Query, ainsi que des exemples de code concrets.

1. Requête par lots

Dans React Query, il est courant d'utiliser la fonction useQueryhook pour effectuer une requête de données unique. Cependant, lorsque nous devons interroger plusieurs données similaires, l’utilisation de requêtes par lots peut améliorer considérablement les performances. En prenant comme exemple les informations de plusieurs utilisateurs de la base de données, nous pouvons obtenir des informations sur les utilisateurs par lots en transmettant un tableau contenant tous les ID utilisateur, au lieu d'interroger chaque utilisateur séparément.

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. Mise en cache des données

Par défaut, React Query met en cache les données renvoyées par la requête en mémoire pour les utiliser dans les rendus de composants ultérieurs. Cela signifie que si plusieurs composants doivent utiliser les mêmes résultats de requête, React Query n'exécutera la requête qu'une seule fois et plusieurs composants partageront les mêmes données. Ce mécanisme de mise en cache des données peut réduire considérablement les requêtes inutiles dans la base de données et améliorer les performances.

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. Prélecture des données

Pour certaines données qui doivent être chargées à l'avance, l'utilisation de la fonction de prélecture des données peut accélérer la vitesse de chargement des pages. React Query prend en charge la pré-récupération des données avant le rendu des composants et leur mise en cache localement. De cette façon, lorsque le composant est rendu, les données requises sont déjà dans le cache et aucune requête supplémentaire n'est nécessaire.

import { useQueryClient } from 'react-query';

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

4. Mise à jour des données

Une fois l'opération de mise à jour de la base de données terminée, React Query peut automatiquement mettre à jour les données des composants associés et effectuer un nouveau rendu. Cela signifie que nous n'avons pas besoin de déclencher manuellement l'opération de mise à jour et que le processus de mise à jour des données est encapsulé dans React Query. De cette manière, nous pouvons nous concentrer sur la mise en œuvre de la logique métier sans nous soucier de la cohérence des données.

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

Ci-dessus sont quelques conseils courants et exemples de code pour optimiser les performances des requêtes de base de données dans React Query. Grâce aux requêtes par lots, à la mise en cache des données, à la prélecture des données et aux mises à jour des données, nous pouvons améliorer considérablement les performances des applications frontales tout en réduisant les requêtes de base de données inutiles. J'espère que cet article pourra vous fournir de l'aide et des conseils pour optimiser les requêtes de base de données dans React Query.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!