REACT深化review 2編

記事リストのインポート

記事リストをインポートする順序
機能を作成する際には、まず考えてから実施する習慣を身につけ、データの変化状況を考慮してから、データの順序やメカニズムを考慮することが重要です.記事リストをインポートする機能を作成する場合、以下の一連の順序を頭の中で描き、考えて実装するとします.

瞬間セット?
JavaScriptで日付や時間などをより簡単に処理するために使っている友人です.Javascriptでは、既存のnew Date()などから日時を個別にインポートするのは面倒で面倒なので、「moment」を使用すると時間の概念をより速く、より簡単にインポートできます.
コード使用例:

insert_dt: moment().format("YYYY-MM-DD hh:mm:ss")

moment()を呼び出すと、現在の時点に基づいて->が返されます.その後、format()という名前の内蔵関数を使用して、format(")カッコ内で上記の例「Year-Month-DayHour:minute:seconds」に従って必要なフォーマットを書き出し、対応するフォーマットでデータを転送します.
特定のコレクションにデータを追加する方法
1)コレクションを選択します.
コード使用例:

const postDB = firestore.collection("post");

2) .add()->を使用します.add()カッコに{}データ値のみが含まれている場合、add({abdbdbd})として記述し、セットにデータを追加できます.
コード使用例:

postDB.add({ ...user_info, ..._post }).then((doc) => {
            
        }).catch((err) => {
            console.log("post작성에 실패했습니다.", err);
        })

3)上のコードにあります.実際にadd()のデータuser infoとpostを入れる前に、チェックしたほうがいいです.
DeboringとThrottle?
短時間で大量のイベントが発生した場合、DeboringとThrottleの2つの方法で効率的に管理できます.この2つの方法は、短時間で大量のイベントが発生した例です.
1)スクロールと
2)APIを検索する.(関連クエリーは、キーボードを入力するたびにonChangeを使用して検索キーに関する情報を表示します)
イベントが起こったら必ず一緒に起こる友達を考えてみましょう.onChangeが立ち上がると、「onChangeが立ち上がるときはどんな仕事をするか」と電話が返ってきます.あるイベントが発生したときの「コールバック」を効率的に管理すればよいと考える.
ex)ㄱ→柿→柿→柿の順に1つずつ選ばれ、選ばれるたびに、つまりonChangeが発生するたびに、検索キーワードに関係するやつを連れてきて、などという反響がありました.
->ここで注意したいのは、各キーワードの変化ごとにコールバックリクエストがある場合、「ありがとう」を書く過程で、何回だけ再レンダリングが発生するのかということです.絶えず交換し、また交換したので、問題が発生しました.△どんな問題ですか.
要求が多すぎるのを防ぎ、レンダリングが多すぎるのを防ぎます.このようにできるのは,クライアントの観点から,1つ1つの中間過程における関連クエリよりも,最終的には最終単語「ありがとう」の関連クエリ結果値が望ましいからである.(DeboringとThrottleを使用して無意味な要求と持続的なレンダリングを防止)
この防止操作の意味と目的は,onChange自体を阻止することではなく,onChange発生時に実行されるコールバックを効果的に制御することである.
Debounce
アクティビティがある場合は、しばらく待ってからアクティビティを実行します.この期間内に他のアクティビティが入っている場合は、以前のリクエストをキャンセルしてアクティビティに移動します.つまり、検索が完了して入力が停止すると、->イベントが発生したときに実行されます.
すなわち、イベントが入ると、コールバックは直ちに実行されるべきであったが、debonseが保留されると、設定された時間内にコールバックは実行されず、待機する.他のイベントが一定時間内に入ると、また新しく入ったイベントにコールバックされます.
Throttle
Deboringと似ていますが、新しいイベントが来ると、以前のイベントへのコールバック(つまり実行が必要)は消えません.(実行せず、所有するだけ)所有し、最後の1つだけ実行します.
整理後、しばらく発生したイベントを収集し、最近発生したイベントコールバックのみを実行します.
DeboringとThrottleの使い方
場合によっては必要なものを使えばいいので、以前活動していたdebonseと保存していたthrottleの性格を削除して、別々に使えばいいと思います.(以前のアクティビティを持つ必要がない場合はdebonse、必要であればThrottleを使用できます)
loadashを使用してイベントを管理する
loadashとは?
loadashはJavaScriptユーティリティライブラリです.loadashは本当に多くのことをしてくれた感謝の友达です.アレイ管理(重複データ削除)、モジュール化(パフォーマンス向上)など、多くのことを簡単にできる友达なので、使用頻度も高く、正式なドキュメントや内容を見ると役に立ちます.文書リンク:https://lodash.com/
関数コンポーネントのフィーチャーとレンダリングの関係
関数型構成部品の特徴は、再レンダリングされると、関数(構成部品)内のすべての変数が初期化されることです.->これはdeboceとthrottleと何の関係があるのでしょうか.初期化されているので、設定された時間(ミリ秒レベル)内では、実行せずに待たなければならないコールバックが実行される可能性があり、元の機能が完了しない場合もあります.
注記のusecallback
では、再レンダリング時にdebonseとthrottleは使用できませんか?
答えはNoです.使用可能な方法は「usercallback」です.
コード使用例:

const keyPress = React.useCallback();

コードから分かるように、useCallback()という名前の友人は、関数を注釈と呼び、ある場所に保存する概念->構成部品が再レンダリングされても、関数を初期化しないでください.これは、保存された関数という注釈を書き続ける概念です.
コード使用例:

const keyPress = React.useCallback(debounce, [text]);

前のパラメータ値に何を駆動するかを示す関数を追加し、後の配列が変化するとその関数も変化します.すなわち,この関数を初期化する条件を2番目のパラメータ値とする.
(useEffectとは異なる機能を実行しますが、使い方は非常に似ています)
再レンダリングが続行されても、debonse関数->初期化されていない->が注記されています.すなわち、素子が再レンダリングされても関数は初期化されないため、debonseを正常に実行することができる.
useCallbackは最適化が非常に重要な友人なので、必ず覚えておいてください.