useInfiniteScroll --- スクロールの読み込みに反応する

useInfiniteScroll は、React コンポーネントに無限スクロール機能を実装するタスクを簡素化するために使用されるカスタム React フックです。

無限スクロールの基本的な考え方は、すべてのデータを一度にロードするのではなく、ユーザーがページを下にスクロールするにつれて徐々にデータをロードするというものです。これにより、すべてのデータが一度に読み込まれるのを待つことなく、ユーザーはコンテンツの無限のリストを感じることができます。

useInfiniteScroll フックを使用して、ユーザーがページの一番下までスクロールしたことを検出し、コールバック関数をトリガーして追加のデータをロードするロジックを処理します。また、ロードのステータスやエラーメッセージを管理する簡単な方法も提供します。

useInfiniteScroll の具体的な手順をいくつか示します。

1: パラメータ:

useInfiniteScroll はコールバック関数をパラメータとして受け入れます。これは、ユーザーインターフェイスのブロックを避けるために非同期関数である必要があります。ユーザーがページの一番下までスクロールすると、useInfiniteScroll が自動的にこのコールバック関数を呼び出し、さらにデータを読み込みます。async/await 構文を使用するには、コールバック関数は Promise を返す必要があります。例えば：

const loadMoreData = async () => {
  // 加载更多数据的逻辑
  const response = await fetch('https://example.com/api/data?page=2');
  const newData = await response.json();
  return newData;
};

const [isFetching, setIsFetching] = useInfiniteScroll(loadMoreData);

コールバック関数は、アプリケーションのニーズに応じて、配列、オブジェクトなどの任意のタイプのデータを返すことができます。ロードされたデータをコンポーネントで使用するときは、通常、次のようにレンダリングできるようにデータを状態に保存する必要があります。

function MyComponent() {
  const [data, setData] = useState([]);
  const [isFetching, setIsFetching] = useInfiniteScroll(loadMoreData);

  const handleLoadData = async () => {
    const newData = await loadMoreData();
    setData(prevData => [...prevData, ...newData]);
  };

  return (
    <div>
      {/* 渲染数据列表 */}
      {data.map(item => <div key={item.id}>{item.name}</div>)}

      {/* 显示正在加载的指示器 */}
      {isFetching && <div>Loading more data...</div>}
    </div>
  );
}

2: 戻り値:

useInfiniteScroll はブール値と関数を返します。ユーザーが現在スクロールしているかどうかを示すブール値、および無限スクロールを有効または無効にする関数。

isFetching: さらにデータがロードされているかどうかを示すブール値。
setIsFetching: isFetching の値を手動で設定するために使用できる関数。

isFetching を使用すると、読み込みインジケーターを表示して、データがロードされていることをユーザーに知らせることができます。たとえば、上記の例では、次のように isFetching を使用して、さらにデータを読み込むときに「Loading」というテキストを表示しました。

{isFetching && <div>Loading more data...</div>}

データがロードされると、isFetching は自動的に false に設定されます。

3: 使用する:

コンポーネントで useInfiniteScroll を使用するのは簡単です。コンポーネント内で useInfiniteScroll を呼び出し、コールバック関数をパラメータとして渡すだけです。次のように：

import useInfiniteScroll from './useInfiniteScroll';

function MyComponent() {
  const loadMoreData = async () => {
    // 加载更多数据的逻辑
  };

  const [isFetching, setIsFetching] = useInfiniteScroll(loadMoreData);

  return (
    <div>
      {/* 渲染数据列表 */}
    </div>
  );
}

4: コンポーネントのステータス:

useInfiniteScroll を使用する場合、データが読み込まれているかどうか、エラーが発生したかどうかなど、コンポーネントの状態を管理する必要もあります。したがって、通常は、useInfiniteScroll を使用してこれらの状態を追跡するコンポーネント内でいくつかの状態変数を定義する必要があります。

useInfiniteScroll コンポーネントの状態には次のものが含まれます。

すべてのデータがロードされたかどうか。
現在のページ番号。
データがロードされているかどうか。

すべてのデータがロードされたかどうかのステータスは、通常、バックエンドによって提供され、返されたデータに次のページがあるかどうかを判断することで判断できます。

現在のページ番号ステータスは、データがロードされるたびに渡されるページ番号パラメータに基づいて判断できます。

データロード中かどうかの状態はisFetchingステータスで表すことができ、データロード中はisFetchingがtrue、ロード完了後はfalseとなります。

5: カスタムオプション:

useInfiniteScroll を使用すると、いくつかのカスタムオプションを渡してその動作をカスタマイズすることもできます。たとえば、スクロールトリガーの距離、初期状態などを指定できます。

一般的なオプションをいくつか示します。

しきい値: ウィンドウの下部から次のリクエストまでに必要なピクセル数を示します。デフォルト値は 0 です。
hasMore: さらにデータがあるかどうかを示します。false に設定すると、読み込みイベントはトリガーされなくなります。
ローダー: データのロード時に表示されるコンポーネントを表します。
useCapture: キャプチャフェーズでイベントを実行するかどうかを示します。デフォルトは false です。

さらに、データをロードするたびに渡す必要があるパラメーター、リクエストヘッダー、リクエストメソッドなどをカスタマイズすることもできます。具体的には、取得 API で使用できるすべての設定を使用できます。詳細については、React ドキュメントのカスタムフックに関するセクションを参照してください。

簡単な例を次に示します。


import { useState, useEffect } from 'react';
import useInfiniteScroll from './useInfiniteScroll';

function MyComponent() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const loadMore = async () => {
    setIsLoading(true);
    try {
      const newData = await fetch(`https://example.com/data?page=${page}`);
      setData(data.concat(newData));
      setPage(page + 1);
    } catch (e) {
      setError(e.message);
    }
    setIsLoading(false);
  };

  const [isFetching, setIsFetching] = useInfiniteScroll(loadMore);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
      {isLoading && <div>Loading...</div>}
      {error && <div>{error}</div>}
    </div>
  );
}

この例には、API エンドポイントからロードされたデータのリストを表示するコンポーネントがあります。ユーザーがページの下部に到達したら、loadMore 関数を呼び出して次のページのデータを取得します。

useInfiniteScroll フックを使用して、ユーザーがページの下部に到達したことを検出し、loadMore 関数をトリガーします。setIsFetching 関数を使用してフックの状態を管理し、ユーザーが現在スクロールしているかどうかを追跡します。

isLoading および error ステータス変数は、データのロード中にロードスピナーとエラーメッセージを表示するために使用されます。