React Query とデータベースを使用してデータキャッシュ戦略を実装する-jsチュートリアル-php.cn

React Query とデータベースを使用してデータキャッシュ戦略を実装する

WBOY

リリース： 2023-09-26 17:54:32

オリジナル

690 人が閲覧しました

利用 React Query 和数据库实现数据缓存策略

React Query とデータベースを使用してデータキャッシュ戦略を実装する

はじめに:
最新の Web アプリケーションでは、データは非常に重要です。アプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させるには、データキャッシュに適切な戦略を使用する必要があります。 React Query は、リアルタイムでのデータのキャッシュと更新を支援する強力な機能を提供する、優れたデータ管理および状態管理ライブラリです。この記事では、React Query とデータベースを使用してデータキャッシュ戦略を実装する方法を紹介し、具体的なコード例を示します。

1. React Query の概要
React Query は、React アプリケーション専用に設計されたデータ管理ライブラリであり、その目標は、アプリケーション内のデータを管理するためのシンプルかつ強力な方法を提供することです。 React Query は、データの取得、キャッシュ、更新、無効化などの操作を処理するための一連のフックと API を提供します。また、カスタムクエリ、オプティミスティックアップデート、リアルタイムアップデート、その他の機能もサポートしているため、複雑なフロントエンドアプリケーションの構築に最適です。

2. データキャッシュの基本原則
データキャッシュ戦略を設計するときは、次の基本原則を考慮する必要があります:

データを取得するときは、まずデータを検索します。キャッシュにデータがある場合は、それが直接返されます。キャッシュにデータがない場合は、サーバーからデータを取得してキャッシュを更新します。
データが更新されると、最初にサーバー上のデータが更新され、次にキャッシュ内のデータが更新されます。これにより、データの一貫性が確保されます。
データごとに、異なるキャッシュ時間を設定できます。頻繁に更新される一部のデータはより短いキャッシュ時間に設定でき、一部の更新頻度が低いデータはより長いキャッシュ時間に設定できます。

3. React Query とデータベースを使用してデータキャッシュを実装する

React Query のインストール
まず、React Query ライブラリをインストールする必要があります。 npm または Yarn を使用してインストールできます:
```
npm install react-query
```
ログイン後にコピー

React Query プロバイダーの構成
アプリケーションのエントリファイルで、React Query のプロバイダーコンポーネントを構成する必要があります:

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

const queryClient = new QueryClient();

function App() {
  return (
 <QueryClientProvider client={queryClient}>
   {/* 应用程序的根组件 */}
 </QueryClientProvider>
  );
}

export default App;

ログイン後にコピー

API の作成
次に、データベースと対話するための API を作成する必要があります。 fetch や axios などのライブラリを使用して HTTP リクエストを行うことができます。

import axios from 'axios';

export const fetchTodos = async () => {
  const response = await axios.get('/api/todos');
  return response.data;
};

export const createTodo = async (todo) => {
  const response = await axios.post('/api/todos', { todo });
  return response.data;
};
// 其他API函数...

ログイン後にコピー

クエリフックの作成
React Query では、useQuery や useMutation などのフックを使用して定義および管理できます。データのクエリと変更:

import { useQuery, useMutation } from 'react-query';
import { fetchTodos, createTodo } from './api';

export function useTodos() {
  return useQuery('todos', fetchTodos);
}

export function useCreateTodo() {
  const queryClient = useQueryClient();
  
  return useMutation(createTodo, {
 onSuccess: () => {
   queryClient.invalidateQueries('todos');
 },
  });
}
// 其他Query Hooks...

ログイン後にコピー

コンポーネントでのクエリフックの使用
コンポーネントでは、作成したばかりのクエリフックを使用してデータを取得および変更できます:

import React from 'react';
import { useTodos, useCreateTodo } from './hooks';

function TodoList() {
  const { data, isLoading, isError } = useTodos();
  const { mutate } = useCreateTodo();
  
  if (isLoading) {
 return <div>Loading...</div>;
  }
  
  if (isError) {
 return <div>Error</div>;
  }
  
  return (
 <div>
   {data.map(todo => (
     <div key={todo.id}>{todo.title}</div>
   ))}
   
   <button onClick={() => mutate({ title: 'New Todo' })}>
     Add Todo
   </button>
 </div>
  );
}

ログイン後にコピー

4. 概要
React Query とデータベースを使用すると、データキャッシュ戦略を簡単に実装できます。 React Query は、よりエレガントで効率的な方法でデータを処理できる豊富な機能と API を提供します。実際のアプリケーションでは、特定のニーズに応じてキャッシュ時間を構成し、戦略を更新することで、アプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させることができます。

上記は、React Query とデータベースを使用してデータキャッシュ戦略を実装する基本的な概要とコード例です。 React Query を理解して適用するのに役立つことを願っています。より良い React アプリケーションの作成を頑張ってください!

以上がReact Query とデータベースを使用してデータキャッシュ戦略を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。