React Query でのデータベース クエリの同時パフォーマンス チューニングの最適化

React Query は、データ管理と状態管理のためのライブラリであり、React アプリケーションでのデータベース クエリの同時実行パフォーマンスの最適化に役立ちます。同時実行パフォーマンスの向上は、アプリケーションの応答速度とユーザー エクスペリエンスを向上させるために重要です。この記事では、React Query を使用してデータベース クエリの同時パフォーマンス チューニングを実行する方法を紹介し、コード例を示します。

始める前に、まず React Query をインストールする必要があります。 npm または Yarn を使用してインストールできます:

npm install react-query

または

yarn add react-query

次に、データベース クエリの同時実行パフォーマンスを最適化する方法を示す簡単な例を作成します。

まず、ユーザーリストを表示するための 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 2 つのパラメータを受け入れます: 最初のパラメータはデータをキャッシュするために使用される一意の識別子で、2 番目のパラメータはデータを要求するために使用される非同期関数です。ユーザーデータを取得する必要がある場合、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 のインスタンスを提供します。このようにして、任意のコンポーネントで useQuery フックを使用してデータを取得できます。

上記のコード例を通じて、React Query がデータベース クエリの同時実行パフォーマンスを最適化する方法を確認できます。 React Query は、データのキャッシュと更新、および同時リクエストの処理を自動的に処理するため、開発作業が大幅に簡素化されます。

以上がReact Query でのデータベース クエリの同時パフォーマンス チューニングの最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。