Reactクエリを使用してフロントエンドCRUDアプリケーションのデータ収集を簡(jiǎn)素化

フロントエンドのCRUDアプリケーションの構(gòu)築は最初は簡(jiǎn)単ですが、機(jī)能が増加するにつれて複雑さが急速に増加します。各APIエンドポイント、狀態(tài)管理、同期、キャッシュ、およびエラー処理が必要です。この記事では、Reactクエリと呼ばれるライブラリと、これらすべての問(wèn)題を解決するのに役立つ方法を紹介します。ライブラリは、「データ収集ライブラリの欠落」であると主張し、Reactアプリケーションに「サーバー狀態(tài)管理」を提供します。

完全なReactクエリデモプロジェクトを使用して、ライブラリが提供するコア機(jī)能を?qū)W習(xí)します。その後、この知識(shí)を自分のプロジェクトに適用できます。まず、プロジェクトのセットアップを開(kāi)始する前に、それについて少し學(xué)びましょう。

キーポイント

• React Query 3は、Reactアプリケーションの狀態(tài)管理とデータ収集、キャッシュ、同期、エラー管理を効率的に簡(jiǎn)素化します。
• このライブラリは、React、Reactルーター、およびREST APIに精通している中間から高レベルの開(kāi)発者に適しています。
• React Query 3は、2.Xバージョンに新しい機(jī)能と改善を追加し、アップグレードされたユーザー向けの移行ガイドを提供します。
デモプロジェクトのデモの重要な機(jī)能には、基本的なクエリ、ページングクエリ、無(wú)制限のクエリ、および作成、更新、および削除操作が含まれます。
React QueryのDevToolsユーティリティは、內(nèi)部狀態(tài)とプロセスをリアルタイムで視覚化することにより、デバッグを支援します。
• データの鮮度とキャッシュの期間を管理することにより、
• やcacheTimeなどの構(gòu)成オプションがパフォーマンスを最適化します。 staleTime
このライブラリは、無(wú)制限のスクロールや複雑な狀態(tài)依存関係などの高度なシナリオをサポートし、ユーザーエクスペリエンスや開(kāi)発者エクスペリエンスを向上させます。

react react query 3について

React Queryは、Tanner Linseyによって作成されたオープンソースプロジェクトです。 React Query 3の最新バージョンは、2020年12月に正式にリリースされました。この新しいバージョンでは、新機(jī)能が追加され、既存の機(jī)能が改善されました。

以前に非常に人気のあるバージョンのReact Query 2.xと比較して、いくつかの重要な変更があることに注意する必要があります。古いバージョン用に書かれた多くの古いチュートリアルに遭遇する可能性があるため、これらの変更を明確に説明する移行ガイドがあります。

新しいバージョンは大幅に改善され、以前に報(bào)告されたバグの多くが解決されました。 3.Xバージョンは生産の準(zhǔn)備ができていますが、まだ開(kāi)発中であり、新しく発見(jiàn)されたバグで定期的に修正されています。

予防策

この記事は、以下の基本的なスキルと知識(shí)を習(xí)得した中間から高レベルのフロントエンド開(kāi)発者向けです。

反応

• React router
• race fooks
• REST APIデータ収集
開(kāi)発マシン環(huán)境では、以下を設(shè)定する必要があります。

node.js

git
郵便配達(dá)員、不眠癥、vsコードの休憩拡張機(jī)能などの休憩クライアント
プロジェクトについて

• 分析するデモプロジェクトは、Reactクエリを使用してREST JSON APIサーバーから提供されたデータを取得するReactフロントエンドアプリケーションです。アプリは5ページのみで構(gòu)成されており、Reactクエリが提供するものを示しています。これらの機(jī)能には次のものが含まれます

  基本的なクエリ
  ページネーションクエリ
  無(wú)制限のクエリ
  操作を作成
  操作を更新
  操作を削除
  Reactクエリはより多くの機(jī)能を提供しますが、この記事はスペースが制限されており、1つずつ導(dǎo)入することはできません。使用するアプリのプレビューは次のとおりです。

  

  プロジェクトの設(shè)定

  セットアップを開(kāi)始する前に、プロジェクトで使用されている他の依存関係を簡(jiǎn)単に見(jiàn)てみる方が良いと思います。これらには次のものが含まれます

  vite：非常に高速なビルドツール

  Windicss：非常に高速なTailwind CSSコンパイラ
  Reactフックフォーム：Reactフックを使用するフォームビルダーと検証ライブラリ
  反応モーダル：アクセス可能なモーダルコンポーネント
  axios：約束ベースのブラウザhttpクライアント
  JSONサーバー：完全な偽造REST API Server
  • 自分のマシンにReactクエリデモアプリケーションを設(shè)定するには、次の手順を?qū)g行します。
  JSON-Serverが使用するデータベースファイルには、さまざまなユーザーが含まれています。

  を?qū)g行すると、偽のAPIサーバーがポート3004で開(kāi)始されます。 GETリクエストを?qū)g行すると、次の例JSON応答が生成されます。

  # 克隆項(xiàng)目
  git clone git@github.com:sitepoint-editors/react-query-demo.git
  
  # 導(dǎo)航到項(xiàng)目目錄
  cd react-query-demo
  
  # 安裝包依賴項(xiàng)
  npm install
  
  # 為 json-server 設(shè)置數(shù)據(jù)庫(kù)文件
  cp api/sample.db.json api/db.json
  
  # 啟動(dòng) json-server
  npm run json-server

  次に、フロントエンドコードを?qū)g行する開(kāi)発サーバーを開(kāi)始します：

  npm run json-server

  ブラウザに移動(dòng)して

  [
    {
      "id": 1,
      "first_name": "Siffre",
      "last_name": "Timm",
      "email": "stimmes0@nasa.govz",
      "gender": "Male"
    },
    {
      "id": 2,
      "first_name": "Fonzie",
      "last_name": "Coggen",
      "email": "fcoggen1@weather.com",
      "gender": "Female"
    },
    {
      "id": 3,
      "first_name": "Shell",
      "last_name": "Kos",
      "email": "skos2@prweb.com",
      "gender": "Female"
    }
  ]

  を開(kāi)いて、アプリケーションにアクセスします。上記のプレビューと同じ経験をする必要があります。次のタスクを?qū)g行して、アプリケーションの機(jī)能を徹底的に調(diào)査してください。
  基本クエリページ（ホームページ）を表示します。

  # 在另一個(gè)終端中，啟動(dòng) React 開(kāi)發(fā)服務(wù)器
  npm run dev

  ページングページにアクセスし、前のボタンと次のボタンと対話します。 http://localhost:3000

  無(wú)制限のページにアクセスし、[ロード]ボタンを操作します。
  • 基本クエリページに戻り、[ユーザーの作成]ボタンをクリックします。 Createユーザーページに送信されます。フォームに入力して、[保存]ボタンをクリックします。
  • ユーザーテーブルで、編集アイコンを見(jiàn)つけます。クリックしてください。これにより、[ユーザーの編集]ページに表示されます。好きな変更を加えて、[保存]ボタンをクリックします。
  • ユーザーテーブルで、「削除」アイコンを見(jiàn)つけます。クリックしてください。これにより、削除操作を確認(rèn)するように依頼するモーダルダイアログボックスが開(kāi)始されます。 [削除]ボタンをクリックして確認(rèn)します。
  • 上記のタスクをすべて完了した後、プロジェクトの分解を開(kāi)始できます。各コンポーネントの位置とビューを理解するには、プロジェクト構(gòu)造を確認(rèn)してください。この記事では、これらのコンポーネントの簡(jiǎn)素化されたバージョンを提供して、プロジェクトでReactクエリを使用することの基本を理解できるようにします。
  インストールreact query

  reactクエリは、次のコマンドを使用して、空白または既存のReactプロジェクトにインストールできます。

  # 克隆項(xiàng)目
  git clone git@github.com:sitepoint-editors/react-query-demo.git
  
  # 導(dǎo)航到項(xiàng)目目錄
  cd react-query-demo
  
  # 安裝包依賴項(xiàng)
  npm install
  
  # 為 json-server 設(shè)置數(shù)據(jù)庫(kù)文件
  cp api/sample.db.json api/db.json
  
  # 啟動(dòng) json-server
  npm run json-server

  このパッケージには、必要なものすべてが含まれています。これには、後で説明します。パッケージをインストールした後、トップレベルのコンポーネントを更新する必要があります -

  - 以下に示すように： App.jsx

  [
    {
      "id": 1,
      "first_name": "Siffre",
      "last_name": "Timm",
      "email": "stimmes0@nasa.govz",
      "gender": "Male"
    },
    {
      "id": 2,
      "first_name": "Fonzie",
      "last_name": "Coggen",
      "email": "fcoggen1@weather.com",
      "gender": "Female"
    },
    {
      "id": 3,
      "first_name": "Shell",
      "last_name": "Kos",
      "email": "skos2@prweb.com",
      "gender": "Female"
    }
  ]

  の子コンポーネントは、Reactクエリライブラリが提供するフックにアクセスできます。この記事で使用するフックは次のとおりです。

  QueryClientProvider

  • useQuery
  • useInfiniteQuery
  • useMutation
  • useQueryClient以下は更新された（簡(jiǎn)素化されたバージョン）
  サブビューを使用して使用します。

  App.jsx（そのようなコンテンツ、UIコンポーネント、基本クエリ、ページネーションクエリ、無(wú)制限のクエリ、突然変異、その他の章など、要件に応じて殘りの部分を引き続き翻訳してください。）

  以上がReactクエリ3：データの取得と管理のガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。