Optimisation du réglage simultané des performances des requêtes de base de données dans React Query

React Query est une bibliothèque de gestion des données et de gestion des états, qui peut nous aider à optimiser les performances de concurrence des requêtes de base de données dans les applications React. L'amélioration des performances de concurrence est cruciale pour améliorer la vitesse de réponse des applications et l'expérience utilisateur. Cet article explique comment utiliser React Query pour effectuer un réglage simultané des performances des requêtes de base de données et fournit des exemples de code.

Avant de commencer, nous devons d'abord installer React Query. Il peut être installé en utilisant npm ou Yarn :

npm install react-query

ou

yarn add react-query

Ensuite, nous créerons un exemple simple pour montrer comment optimiser les performances de concurrence des requêtes de base de données.

Tout d'abord, nous devons créer un composant UserList pour afficher la liste des utilisateurs. Dans le composant, nous utiliserons le hook useQuery pour obtenir les données utilisateur. Le hook useQuery gère automatiquement la mise en cache et la mise à jour des données, ainsi que la gestion des requêtes simultanées. UserList 组件来展示用户列表。在组件中，我们将使用 useQuery 钩子来获取用户数据。useQuery 钩子会自动处理数据的缓存和更新，以及处理并发请求的问题。

import React from 'react';
import { useQuery } from 'react-query';

const UserList = () => {
  const { data, status } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error fetching data</div>;
  }

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

export default UserList;

在上面的代码中，我们使用 useQuery 钩子来获取用户数据。useQuery 接受两个参数：第一个参数是一个唯一的标识符，用于缓存数据；第二个参数是一个异步函数，用于请求数据。当我们需要获取用户数据时，React Query 会首先检查缓存中是否已存在数据，如果有，则直接返回缓存的数据；如果没有，则执行异步函数来获取数据，并将数据缓存起来。

接下来，我们需要创建一个用于获取用户数据的 API。在这个例子中，我们使用一个简单的 Express 服务器来模拟数据库查询：

// server.js
const express = require('express');
const app = express();

app.get('/api/users', (req, res) => {
  setTimeout(() => {
    const users = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' },
      { id: 3, name: 'Bob' },
      // ...
    ];
    res.json(users);
  }, 1000);
});

app.listen(5000, () => {
  console.log('Server listening on port 5000');
});

最后，我们需要创建一个包含 UserList 组件的父组件来渲染整个应用：

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import UserList from './UserList';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <h1>User List</h1>
        <UserList />
      </div>
    </QueryClientProvider>
  );
};

export default App;

在上面的代码中，我们使用 QueryClientProvider 来为整个应用提供一个 React Query 的实例。这样，我们就可以在任何组件中使用 useQueryrrreee

Dans le code ci-dessus, nous utilisons le hook useQuery pour obtenir les données utilisateur. useQuery accepte deux paramètres : le premier paramètre est un identifiant unique utilisé pour mettre en cache les données ; le deuxième paramètre est une fonction asynchrone utilisée pour demander des données. Lorsque nous avons besoin d'obtenir des données utilisateur, React Query vérifiera d'abord si les données existent déjà dans le cache. Si tel est le cas, il renverra directement les données mises en cache, sinon il exécutera une fonction asynchrone pour obtenir les données et mettre les données en cache. .

Ensuite, nous devons créer une API pour obtenir les données utilisateur. Dans cet exemple, nous utilisons un simple serveur Express pour simuler des requêtes de base de données : 🎜rrreee🎜Enfin, nous devons créer un composant parent contenant le composant UserList pour restituer l'intégralité de l'application : 🎜rrreee🎜Dans ce qui précède Dans le code, nous utilisons QueryClientProvider pour fournir une instance de React Query pour l'ensemble de l'application. De cette façon, nous pouvons utiliser le hook useQuery dans n'importe quel composant pour obtenir les données. 🎜🎜Grâce aux exemples de code ci-dessus, nous pouvons voir comment React Query optimise les performances de concurrence des requêtes de base de données. React Query gère automatiquement la mise en cache et la mise à jour des données, ainsi que la gestion des requêtes simultanées, ce qui simplifie grandement notre travail de développement. 🎜

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!