React で無限スクロール コンポーネントを構築する

導入

アプリケーションやウェブページ、特にスクロールするだけでよいソーシャルメディアで無限スクロールが見られます。何も考えずにスクロールするのは良くありませんが、独自の無限スクロールを構築するのは素晴らしいことです。開発者として、Web サーフィン中に目にするコンポーネントを再作成してみる必要があります。一部のコンポーネントを実装する際には、より多くのことを学び、既成概念にとらわれずに考えることが求められる場合があります。

また、アプリケーションに無限スクロールを実装したい場合は、ガイドに従って独自のスクロールを作成できます。独自のコードを追加して、スクロールの動作を改善できます。

この記事では、無限スクロール コンポーネントを最初から構築します。以下のトピックについて説明します:

• 環境セットアップ
• コンポーネントの構築
• CSSの追加
• 無限スクロールの最適化

さて、始めましょう

環境設定

CRA を使用して基本的な React アプリケーションを作成します。次のコマンドを実行することでこれを行うことができます:

リーリー

Vite または NextJS を使用したい場合は、それも可能です。マイナーな変更を除けば、その他の点は変わりません。

注: このコマンドを実行するには、NodeJS がプリインストールされている必要があります。 また、CRA から不要な定型コードの一部を削除します。

API からデータを取得するには、依存関係が 1 つ必要になります。 React を設定したら、次のコマンドで Axios をインストールできます:

リーリー

これで、コンポーネントを作成する準備が整いました。

アプリコンポーネント

Tmdb API から人気のある映画データを取得するコンポーネントを構築します。 API キーは Web サイトから無料で取得できます。まずデータを取得する場所を構築してから、無限スクロール機能を追加しましょう。

アプリコンポーネントのコードは次のとおりです:

App.js

リーリー

データを取得し、それを小道具として MovieCard コンポーネントに渡しているコードをほぼ理解できます。

各映画の情報を表示するための MovieCard.js コンポーネントを作成します。

MoveCard.js

リーリー

アプリケーションのCSSは次のとおりです:

App.css

リーリー

無限スクロール

それでは、まず無限スクロールをどのように構築するかを理解しましょう。このために、スクロール バーの位置を見ていきます。スクロール バーの位置がページの終わりのすぐ上にある場合、読み込み状態を true に設定します。

ページの状態を 1 増やす別の useEffect を用意します。ページ番号が更新されると、そのページを依存関係として持つ最初の useEffect がトリガーされます。これにより、 fetchMovie() 関数が呼び出され、データが取得されます。

スクロールへの EventListner の追加

まず、スクロールバーの位置が変更されたことを知るためにリッスンも追加します。

リーリー

ハンドルスクロール

スクロールが発生すると、スクロール バーの現在の位置が Web ページの下部 (つまり、垂直スクロール可能な領域の合計) のすぐ上にあるかどうかを確認します。 「はい」の場合、読み込み状態を true に変更します。

リーリー

• scrollHeight : 画面に表示されていない部分を含むコンテンツの合計の高さを返すプロパティです。したがって、それはスクロール可能な領域の合計になります。
• scrollY: 文書を上から垂直にスクロールしたピクセル数を返すプロパティです。スクロールした部分になります
• innerHeight: ブラウザーの Windows コンテンツ領域の高さを返すプロパティです。スクロールバーの幅になります。これは、コンテンツを渡したときではなく、コンテンツに到達したときにフェッチが行われるように、scrollY に追加されます。 ##エフェクトを使用

読み込み状態の変更に成功したら、ページ番号をインクリメントする useEffect を実装できます。これにより、ムービー データの取得が可能になります。

リーリー

EventListnerの最適化

スクロール中に handleScroll を複数回トリガーできるため、不要な関数の呼び出しが複数回発生します。関数にデバウンスを追加して、関数を呼び出すまでに時間がかかるようにすることができます。

リーリー

App.js の完全なコードは次のとおりです:

リーリー

これは、アプリケーションの動作を示す GIF です。

결론

React에서 무한 스크롤 구성 요소를 구축하는 것은 매우 보람 있는 경험이 될 수 있습니다. 스크롤 작동 방식에 대한 이해를 높일 뿐만 아니라 상태 관리, 이벤트 리스너 및 디바운싱과 같은 최적화 기술에 대해서도 알려줍니다. 이 가이드를 따르면 이제 필요에 따라 사용자 정의하고 개선할 수 있는 기본 무한 스크롤 설정을 갖게 되었습니다.

영화 데이터, 블로그 게시물 또는 기타 콘텐츠를 표시하는 경우 이 구성 요소는 강력한 기반 역할을 합니다. 핵심은 사용자가 스크롤할 때 데이터를 가져오는 시기와 방법을 신중하게 관리하여 원활한 사용자 환경을 보장하는 것입니다. 즐거운 코딩하세요!

以上がReact で無限スクロール コンポーネントを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。