ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。