トピック:無限スクロールと加速

1.無限スクロール

最初に無限スクロールを実現したとき、私が見た画面と画面全体の違いを利用して、一定の値に下がったときにロードするように設定し、進行中にすべてのページでスクロールイベントが発生します.理由の結果を考える本プロジェクトでは,1ページルータが問題であると考える.この問題を解決するために、無限スクロールイベントを各ページに分けて削除しようとしたが、非同期処理のため、スクロール速度はステータス値よりもロード速度が速いため、ロード値間で無限スクロールを行い、ページングを増やした.非同期処理をキャプチャするためにapiではページ上の複数のブランチを試みたが,スクロールイベントの速度が速く,無限スクロールは他の方法を用いるべきであると結論した.

解決方法:observerライブラリを使用して、すべてを一度に解決しました...本当に便利な観察者忘れ難いhttps://slog.website/post/8

2番目の問題が発生しました.
**ユーザーが別のページに接続されているか、別のページからリフレッシュされている場合はpageです.nowがそのページになったら、それからホームページになります.

post.jsのサーバから文章を呼び出すgetPostAPI()で呼び出し(戻る)ページを中断します.nowとpagepreを主とする

コードif(whatPages.now!=whatPages.pre){console.log(whatPages.now,whatPage.pre);console.log("2を保留");dispatch("ホームページ");return;///getPostaIP()の呼び出しを防止し、別のページに入ってからホームページに戻るときにpostを呼び出す

ロールバックはgetpostAPI()を再実行できず、記事を読み込めません.(スクロールに関連するuserEffectとデフォルトのuserEffectは異なるuserEffectにあります)
だからPageCheckという友達がいて、交換するたびにサーバーから文章を取得できるgetPostAPI()のuserEffectを再アップロードさせました.
PageCheckのデフォルト値はfalseです.つまり、ホームページではなく別のページパスに最初に入った場合です.
trueに変換し、上のuserEffectをレンダリングし、getPostAPI()を呼び出します.しかし、それ以上に問題が発生しました.

コード

React.useEffect(() => {
 
 dispatch(postActions.isMainPage(true));
 
 dispatch(postActions.whatPage("mainPage"));
 
 *if* (post_list.length === 0) {
 
 dispatch(postActions.getPostAPI());
 
 }
 
 }, [is_stack_clicked, is_sort_clicked, is_reBook_clicked, pageCheck]);
 
 React.useEffect(() => {
 
 *if* (inView === true) {
 
 setPaging(paging + 9);
 
 console.log("내가 페이지", paging);
 
 dispatch(pageAction.getPage(paging));
 
 *if* (post_list.length === 0 && pageCheck === false) {
 
 dispatch(postActions.pageCheck(true));
 
 }
 
 }
 
 }, [inView]);

画面描画時にobserverdivが表示され、最初にメイン画面からリフレッシュするとgetPostAPI()で2回の呼び出しイベントが発生します.
この問題を解決するために、post listはサーバから受信されず、pageCheckがfalseの場合、500 pxの高さのdivが見えないdivが追加されました.
これで自然に転がることができます.

{post_list.length === 0 && pageCheck === false && (

<>

<div *style*={{ height: "500px" }}></div>

</>

)}

ソリューション:フロントでページングを処理するためにAPIが改良されました.サーバから受信すると,pushの部分が=に変更され,すべてのpostの受信が開始され,APIがフロントに変更されてページング処理が行われると,pushは不要となる.

で試した幽霊divは

を削除しました

2.速度改善

のホームページでは、Filter、Sort、Infinity Scrollなどの処理が必要な要素が増えるにつれて、文章のロード速度が低下します.

の解決策:各モジュールをそれぞれ作成することによって、ロード形式で文章をロードするAPIを簡略化し、速度を向上させる.