カスタムの作成方法

反応アプリでは、時にはあなたのユーザーがページの下部にスクロールしているときに知っておくことが重要です.
例えば、Instagramのような無限のスクロールを持つアプリケーションでは、ユーザーがページの一番下に到達すると、より多くの投稿を取得する必要があります.

無限スクロールを作成するような類似のユースケースに対してusepagebottomフックを作成する方法を見てみましょう.
まず、別のファイルを作ります.私たちのutilsフォルダのjs、同じ名前の関数(フック)を追加します.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {}

次に、ユーザーがページの一番下に当たるときに計算する必要があります.これをwindowから情報を得ることができます.これにアクセスするために、フックが呼び出されたコンポーネントがマウントされていることを確認する必要があるので、useEffectフックを空の依存関係配列で使用します.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  React.useEffect(() => {}, []);
}

ウィンドウのinnerHeight値をプラスして、文書のscrollTop値がoffsetHeightに等しいとき、ユーザーはページの底にスクロールしました.これらの2つの値が等しい場合、結果はtrueになり、ユーザーはページの一番下にスクロールします.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  React.useEffect(() => {
    window.innerHeight + document.documentElement.scrollTop === 
    document.documentElement.offsetHeight;
  }, []);
}

この式の結果をisBottomの変数に格納し、bottomという状態変数を更新します.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    const isBottom =
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight;
    setBottom(isButton);
  }, []);

  return bottom;
}

しかし、私たちのコードは動作しません.なぜ?
問題は、ユーザーがスクロールするたびに、isBottomを計算する必要があるという事実にあります.その結果、window.addEventListenerでスクロールイベントを聞く必要があります.この関数は、ユーザーがスクロールするたびに呼び出されるローカル関数を作成することで、この式を再評価できます.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    function handleScroll() {
      const isBottom =
        window.innerHeight + document.documentElement.scrollTop 
        === document.documentElement.offsetHeight;
      setBottom(isButton);
    }
    window.addEventListener("scroll", handleScroll);
  }, []);

  return bottom;
}

最後に、状態を更新するイベントリスナーがあるので、ユーザーがページから離れて移動し、コンポーネントが削除されるというイベントを処理する必要があります.追加したスクロールイベントリスナーを削除する必要がありますので、存在しない状態変数を更新しようとしません.handleScrollと共にuseEffectから機能を返すことによってこれをすることができます、そこで、我々は同じwindow.removeEventListener機能へのリファレンスを通過します.そして、我々はしました.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    function handleScroll() {
      const isBottom =
        window.innerHeight + document.documentElement.scrollTop 
        === document.documentElement.offsetHeight;
      setBottom(isButton);
    }
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return bottom;
}

今、我々は単に我々がページの底を打ったかどうか知りたいどんな機能ででもこのコードを単に呼ぶことができます.無限スクロールを使用するフィードコンポーネントで使用する方法の一例です.

// components/Feed.js
import React from "react";
import usePageBottom from "../utils/usePageBottom";

function Feed() {
  const isPageBottom = usePageBottom();

  React.useEffect(() => {
    // if no data or user hasn't scroll to the bottom, don't get more data
    if (!isPageBottom || !data) return;
    // otherwise, get more posts
    const lastTimestamp = data.posts[data.posts.length - 1].created_at;
    const variables = { limit: 20, feedIds, lastTimestamp };
    fetchMore({
      variables,
      updateQuery: handleUpdateQuery,
    });
  }, [isPageBottom, data, fetchMore, handleUpdateQuery, feedIds]);
}

あなた自身のクライアントが反応アプリをレンダリングでこのフックを使用してお気軽に!

このポストをお楽しみください。反応ブートキャンプに加わってください

The React Bootcampは、反応を学習し、ビデオ、チートシート、プラス特別ボーナスを含む1つの包括的なパッケージにバンドルを知っておくべきすべてを取ります.
ゲインインサイダー情報何百もの開発者はすでに反応をマスターするために使用して、彼らの夢の仕事を見つけて、将来の制御を取る:

それが開くとき、知らせられるために、ここをクリックしてください