Front-End-Leistungsstrategien zur Optimierung von Datenbankabfragen in React Query-js-Tutorial-php.cn

Front-End-Leistungsstrategien zur Optimierung von Datenbankabfragen in React Query

WBOY

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

Original

1521 Leute haben es durchsucht

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

Front-End-Leistungsstrategien zur Optimierung von Datenbankabfragen in React Query

In der modernen Front-End-Entwicklung müssen wir häufig mit der Back-End-Datenbank interagieren, um Daten zum Rendern der Seite zu erhalten. Allerdings können häufige Datenbankabfragen zu Leistungsproblemen führen, insbesondere wenn die Seite große Datenmengen rendern muss. In diesem Fall können wir React Query verwenden, um die Front-End-Leistung von Datenbankabfragen zu optimieren.

React Query ist eine JavaScript-Bibliothek zum Verwalten von Datenabfragen und -status. Es bietet eine einfache, Hook-basierte Möglichkeit, Daten abzufragen und zwischenzuspeichern. Durch die Verwendung von React Query können wir die Anzahl der Datenanfragen und die Komplexität des Datenaustauschs zwischen Komponenten reduzieren.

Wie kann man also die Front-End-Leistung von Datenbankabfragen in React Query optimieren? Im Folgenden untersuchen wir einige spezifische Strategien und geben Codebeispiele.

Daten zwischenspeichern

React Query verfügt über einen integrierten Daten-Caching-Mechanismus, der die erhaltenen Daten zur späteren Wiederverwendung im Speicher zwischenspeichern kann. Auf diese Weise ist es bei der nächsten Abfrage derselben Daten nicht erforderlich, die Anfrage erneut an die Backend-Datenbank zu senden, wodurch die Leistung verbessert wird.

Hier ist ein Beispiel, das zeigt, wie der Caching-Mechanismus in React Query verwendet wird:

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

Nach dem Login kopieren

In diesem Beispiel verwenden wir den useQuery-Hook, um die Benutzerdaten abzurufen und die userId von einzugeben die Daten als Abfrageschlüssel. React Query speichert die Ergebnisse dieser Abfrage automatisch zwischen, sodass sie bei der nächsten Abfrage derselben Daten direkt verwendet werden können. 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>
  );
};

Nach dem Login kopieren

在这个示例中，我们使用 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>
  );
};

Nach dem Login kopieren

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

Manchmal müssen wir möglicherweise mehrere Daten gleichzeitig abfragen, z. B. die persönlichen Daten und Bestellinformationen des Benutzers abrufen. In diesem Fall können wir den Hook useQueries verwenden, um mehrere Abfragen zu kombinieren. Auf diese Weise kann React Query diese Abfragen gleichzeitig an das Backend senden und die Ergebnisse zurückgeben, nachdem alle Abfragen abgeschlossen sind.

Hier ist ein Beispiel, das zeigt, wie man mehrere Abfragen in React Query kombiniert:

useQueries

userData

orderData

useQueryClient

prefetchQuery

useQueryClient

prefetchQuery code> aufzurufen Funktion zum Vorabrufen von Benutzerdaten. Anschließend verwenden wir den Hook <code>useQuery

Das obige ist der detaillierte Inhalt vonFront-End-Leistungsstrategien zur Optimierung von Datenbankabfragen in React Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!