React アプリで API 呼び出しを最適化した方法-jsチュートリアル-php.cn

React アプリで API 呼び出しを最適化した方法

Susan Sarandon

リリース： 2024-09-27 16:30:29

オリジナル

727 人が閲覧しました

How I Optimized API Calls by in My React App

React 開発者として、私たちは複数の急速な状態変化を API と同期する必要があるシナリオによく直面します。小さな変更ごとに API 呼び出しを行うのは非効率的であり、クライアントとサーバーの両方に負担がかかる可能性があります。ここで、デバウンスと賢明な状態管理が機能します。この記事では、ペイロードをマージし、API 呼び出しをデバウンスすることで、並列 API 更新呼び出しをキャプチャするカスタム React フックを構築します。

問題

ユーザーが設定や好みを調整できる入力フィールドを想像してください。キーストロークまたは調整ごとに API 呼び出しをトリガーして、新しい状態を保存できます。ユーザーが複数の変更を立て続けに行うと、API リクエストが大量に発生する可能性があります。

ネットワークリソースの非効率的な使用。
潜在的な競合状態。
サーバーに不必要な負荷がかかります。

デバウンスに入る

デバウンス は、関数が起動できる速度を制限するために使用される手法です。関数をすぐに呼び出すのではなく、一定期間非アクティブになってから実行します。遅延が終了する前に別の電話がかかってくると、タイマーがリセットされます。

デバウンスを使用する理由

パフォーマンスの向上: 不要な API 呼び出しの数を削減します。
リソースの最適化: サーバーの負荷とネットワークの使用量を最小限に抑えます。
ユーザーエクスペリエンスの強化: 迅速な連続通話による遅延や潜在的なエラーを防ぎます。

useRef の役割

React では、useRef は再レンダリングをトリガーせずにレンダリング間で変更可能な値を保持できるようにするフックです。これは本質的に、変更可能な値を保持するコンテナです。

ここで useRef を使用する理由

蓄積された更新を保持する: 再レンダリングを発生させずに、レンダリング間で蓄積された更新を追跡する必要があります。
可変の現在値へのアクセス: useRef は、読み取りと書き込みが可能な .current プロパティを提供します。

useDebouncedUpdate フック

コードを詳しく見て、すべてがどのように構成されるかを理解しましょう。

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record<string, any>;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef<DebouncedUpdateParams | null>(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

ログイン後にコピー

ブレイク・イット・ダウン

1. useRef を使用して更新を蓄積する

すべての受信アップデートの組み合わせパラメータを保存するために、accumulatedUpdates という useRef を初期化します。

constAccumulatedUpdates = useRef(null);

2. API 呼び出しのデバウンス

マテリアル UI のデバウンスユーティリティを使用して、デバウンス関数 processUpdates を作成します。

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;




</p>
<ul>
<li> <strong>processUpdate に useRef を使用する理由</strong> デバウンスされた関数がレンダリングごとに再作成されないようにするために useRef を使用します。これにより、デバウンス タイマーがリセットされます。</li>
</ul>

<h4>
  
  
  3. useCallback を使用した更新の処理
</h4>

<p>handleUpdate 関数は、更新を蓄積し、デバウンスされた API 呼び出しをトリガーする役割を果たします。<br>
</p>

<pre class="brush:php;toolbar:false">const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

ログイン後にコピー

パラメータのマージ: すべての更新が確実にキャプチャされるように、新しいパラメータを既存のパラメータとマージします。
デバウンスのトリガー: handleUpdate が呼び出されるたびに processUpdates() をトリガーしますが、実際の API 呼び出しはデバウンスされます。

4. useEffect を使用したクリーンアップ

メモリリークを防ぐために、コンポーネントがアンマウントされるときにデバウンス関数をクリアします。

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

ログイン後にコピー

仕組み

パラメータの累積: 各更新ではパラメータがAccumulatedUpdates.currentに追加され、既存のパラメータとマージされます。
デバウンス実行: processUpdates は、実行する前に非アクティブな遅延ミリ秒を待機します。
API 呼び出し: デバウンス時間が経過すると、マージされたパラメーターを使用して apiUpdate が呼び出されます。
累積更新をリセット: API 呼び出し後、accumulatedUpdates.current を null にリセットします。

使用例

コンポーネントでこのフックを使用する方法は次のとおりです:

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    <div>
      <input
        type="text"
        onChange={(e) => handleChange("username", e.target.value)}
      />
      <input
        type="checkbox"
        onChange={(e) => handleChange("notifications", e.target.checked)}
      />
    </div>
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

ログイン後にコピー