[TIL][UFO]-無限スクロールアプリケーション

😓 無限スクロール

フリー掲示板ページ

デザイナーと初期プロジェクトを設計する場合は、フリー掲示板でページ移動をページ名に設定します.デザイン上デスクトップ上の掲示板リストページが少し空いている可能性があるため、UI要素を加えて解決することをお勧めする人が多い.

では、なぜ無限スクロールを適用するのでしょうか。

プロジェクトの開始に輪角があり、配布のためにバージョン1を作成し、ユーザーのフィードバックを得ることにしました.
フェイスブック広告を利用して海外大学在学中の留学生に宣伝し、グーグル分析を利用してサービス利用データを収集する.
結果はわれわれの予想とは違う😧
初期、ユーザーである留学生がどのような機械で私たちのサービスを利用するかを考えたとき、彼らは大学生だったので、より多くのユーザーがデスクトップを使用することを期待していました.
しかしGoogleの分析で確認した結果、モバイルサービスを利用する人はモバイルサービスを利用する人の2.5倍であり、実際のフィードバックでは、モバイル環境でサービスを利用するのは不便だという意見が寄せられた.
ある意味では当たり前の結果です.モバイルユーザのために反応型viewを作成したが,前述したように,大きさが小さく反応型が大きくなるだけで,モバイルユーザの立場では当然不便を感じる.
私たちは直接モバイルでサービスをテストして、ページ名のボタンをクリックしたり、投稿を書くために執筆ボタンをクリックしたりして、モバイルでは本当に不便です.

🏋️‍ Challenge

この問題を解決するために、モバイル環境では無限スクロールページが適用され、投稿がロードされます.
(機能の実装が完了したら、本当に文章を書きたいかもしれませんが、これは簡単すぎるようですが...これは本当に難しいです.)

1.無限スクロールの作成

無限スクロールを作成する方法は、10個のしきい値が見つかった場合、10個とも異なる方法で実現されるため、実現方法を決定するのに多くの時間がかかります.

まず、IntersectionObserverAPIを使用する方法を考えます。

IntersectionObserverとはMDNドキュメントに記載されているものです.
IntersectionObserver(クロスオブザーバAPI)は、ターゲット層とターゲット層の親層または親層のビューポートが交差する箇所を非同期で観察するAPIである.
に表示されます.
簡単に言えば、Intersection Observerは、画面(ビューポート)に私が指定したターゲット要素があるかどうかを観察するAPIです.
Intersection Observerを適用して無限スクロールを行う場合は、viewportの画面に表示される特定のターゲット要素useref()で観察し、サーバに投稿をロードして投稿リストに追加すればよい.
特に、無限スクロールを実現する際、window volwlを使用する場合、不要なリクエストを減らすためにdebonse、throttleを使用することができます.
スクロールイベントでは、現在の高さの値を知るために、レイアウトが毎回再描画され、正しい値が得られます.

上記の資料から分かるように、レイアウトを再描画することはレンダリングツリーを再生成することを意味し、この一連の「再ストリーム」と呼ばれるプロセスを繰り返すと、ブラウザのパフォーマンスが低下し、画面が混乱するのは当然です.

2つ目の考え方は、何度も実装された無限スクロール素子を作成し、情報を含む素子を包むことである。

Intersection Observerを使用する方法も魅力的だと思いますが、機能を素早く実現して再配置する必要がある場合なので、従来通り行うことにしましたが、Intersection Observer APIは今後の個人プロジェクトで取り扱うことになります.

const InfinityScroll = props => {
    const { nextCall, children, is_loading, is_next, size } = props;

    const throttle = _.throttle(() => {
        let scrollHeight = document.documentElement.scrollHeight;
        let innerHeight = window.innerHeight;
        let scrollTop =
            (document.documentElement && document.documentElement.scrollTop) ||
            document.body.scrollTop;
        let current_height = scrollHeight - innerHeight - scrollTop;

        if (current_height < size) {
            if (is_loading) {
                return;
            }

            nextCall();
        }
    }, size);
    const throttle_callback = useCallback(throttle, [is_loading]);

    useEffect(() => {
        if (is_loading) {
            return;
        }
        if (is_next) {
            window.addEventListener("scroll", throttle_callback);
        } else {
            window.removeEventListener("scroll", throttle_callback);
        }

        return () => window.removeEventListener("scroll", throttle_callback);
    }, [is_loading, is_next]);
    return <>{children}</>;
};

無限スクロール素子です.この素子は5つのpropsを転送して使用することができる.

nextCall

children

is_loading

is_next

size

nextCallは、スクロールして地面に着いたときに実行される関数で、リストのapiのロードを要求するコールバックを受信します.
is loading値により、非同期要求が進行中の場合にnextCallが再実行できないことが管理されます.
is nextは、次の投稿ページが存在するかどうかを確認する値です.
sizeは、ロードする投稿の数を指定する値です.

フリー掲示板ページに無限スクロールを適用するコードです。

<InfinityScroll
nextCall={nextCall}
is_next={nextPage <= totalPage ? true : false}
size={100}
is_loading={is_Loading}
>
<BoardBox
postList={freeBoardPostList && freeBoardPostList}
preview={true}
boardName="freeboard"
/>
</InfinityScroll>