簡単なステップで無限スクロールをマスターする

無限スクロール

ブラウザーが提供する IntersectionObserver API を使用して無限スクロールを実装できます。
実装するには、次の手順に従うだけです:-

1. 無限スクロールにモック API を使用して、カスタム フックを作成できます
2. このカスタム フックは、API のパラメーターを関数の独自のパラメーターとして受け取ります。
3. その後、useEffect と axios を使用して、関数パラメータからパラメータを渡して API 呼び出しを実装するだけです。
4. ロード、エラー、hasMore、データを状態として持つことができます
5. setTimeout を使用して、読み込みと無限スクロールを適切にチェックすることもできます
6. hasMore は、API 呼び出しから取得したものと比較して、現在ページに表示しているデータの配列の長さに相当します
7. これは、データの終わりに達した場合でも呼び出しを回避するためにあります。
8. カスタムフックがメインページに存在したら、渡したパラメータの状態を作成します
9. 次にパラメータをカスタムフックに渡してデータを取得します
10. 取得したデータのリストをマップを使用してレンダリングして表示します
11. 最後に到達したら無限スクロールを適用する必要があるため、受信した配列の最後の要素データについては単純に ref を追加します
12. この ref は useCallback 関数と同等になり、そのパラメータはこの最後の要素になります。
13. 次に、値がデフォルトで null になる useRef を作成します
14. 次に、読み込み状態かどうかを確認します。 「はい」の場合は、単に返します
15. 次に、この useRef の現在の値が null かどうかを確認します。 null でない場合は、単にこのオブザーバーを切断します。ここでの考え方は、毎回新しいデータが得られるため、オブザーバーは毎回新しい必要があるということです
16. ここで、新しい IntersectionObserver によってコールバック関数の現在の値をこの新しい Observer に割り当てます。IntersectionObserver API は、パラメーターとしてエントリを持つコールバック関数を返します。
17. これらのエントリは基本的に、ページ内にあるときの最後の要素の値です。ページ内でこれらのエントリを操作するときの条件が必要です
18. したがって、各エントリにブール値があります。交差しています
19. これが true の場合、カスタム フックのパラメーターを変更します。これにより、API が再度呼び出され、レンダリングも再度実行されます
20. 最後にコールバックで渡した要素を観察する必要があるため、要素がある場合はそれを観察するだけです。

コード

カスタムフック.jsx

App.jsx

constants.js

以上が簡単なステップで無限スクロールをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。