surf react : hooks (useMemo, useCallback) - 3

🔔 Goal

react usemoを理解します.

理解

react useCallback.

useMemoとuseCallbackは、リアクターレンダリング性能を最適化するhookであるため、使用する必要はありません.
しかし、将来大規模なサービスに参加する際、このような小さな性能は確かにサービスの品質を区別していると思います.

🌳 useMemo

コメントの値を返します.
userMemoの最初のパラメータでは、どのように演算するかを定義する関数を渡し、2番目のパラメータにdeps配列を加えるとよい.
この配列の内容が更新された場合、登録した関数を呼び出して値を計算し、内容が変更されていない場合は、以前に計算した値を再使用します.
配列がない場合は、レンダーするたびに新しい値が計算されます.これにより、レンダリング時の高コスト計算が防止されます.
また、userMemoに渡される関数は、レンダリング中に実行されます.したがって、レンダリング中にこの関数で行うべきではありません.
たとえば、サイドエフェクトは、userMemoではなくuserEffectで行われます.
副作用:API呼び出し、DOM操作など
次の例を参照すると、理解に役立ちます.
ベロフォードの反応vlpt.us
正式書類は以下の通りです.
userMemoはパフォーマンスの最適化に使用できますが、保証されているとは思いません.
近い将来、Reactは、以前のコメントが現在完了している値の一部を「忘れ」することを選択し、次回のレンダリング時に再計算することができます.
たとえば、画面外の構成部品のメモリを解放します.
コードを記述し、usemoを使用することなく、コードを追加してパフォーマンスを最適化します.
本当に必要なときに使わせてもらうと.

🌳 useCallback

コメントが完了したコールバックを返します.
useMemoに似たHook(useCallbackはuseMemoに基づく).useMemoは特定の結果値を再使用するために使用され、useCallbackは新しい関数を作成するのではなく、特定の関数を再使用するために使用されます.
useCallback(fn,deps)はuseMemo((()=>fn,deps)と同じです.
構成部品を再レンダリングするたびに、構成部品内で宣言された関数が再作成されます.宣言関数自体はメモリやCPUリソースを大量に消費するタスクではないため、新しく宣言した関数自体に大きな負荷は発生しません.
しかし、関数を1回作成する必要がある場合にのみ再作成および再利用することは、ソフトウェアエンジニアリングの重要なモードです.
後で構成部品のpropsが変更されない場合は、仮想DOMで再レンダリングする必要はなく、構成部品成果物を再使用する最適化操作を行い、関数を再使用する必要があります.
関数にstateまたはpropsが使用されている場合はdeps配列に含める必要があります.
deps配列に関数で使用される値を入れないと、関数でこれらの値を参照するときに最新の値が参照されることは保証されません.
propsが受け取った関数があればdepsにも入れるべきです.
前述したように、useCallbackはuseMemoに基づいて作成されます.
ただ、関数の使用に便利になりました.コールバック関数を返す式は、以下のようにuserMemoを使用して記述できます.

const onToggle = useMemo(
  () => () => {
    /* ... */
  },
  [users]
);

useCallbackを使用することで,明らかな最適化は直ちに実現できない.これは、最適化された構成部品のレンダリングのみがパフォーマンスを最適化できるためです.
次の例を参照すると、理解に役立ちます.
ベロフォードの反応vlpt.us

🍃 React.memoと一緒に使う

useCallback()hook関数は、サブエレメントのレンダリングに不要なレンダリングを低減するために使用されます.memo()関数とともに使用することもできます.
React.memo()関数で囲まれた素子関数はprops値が変わらない場合に再呼び出されません.
特定の値または動作を制御するhandler関数がpropsとしてサブエレメントに渡されたと仮定します.

handler関数をuseCallbackに読み込み、依存値が変わらない場合は再使用できます.

構成部品が再レンダリングされます.

handler関数の依存値は変更されず、propsに再使用されて渡されます.

+その他
上の反応.サブ構成部品をmemoで囲むと、再使用(変更なし)のprops(プロセッサ)が受信されるため、構成部品は再レンダリングされません.
これにより、不要な関数やサブエレメントの再レンダリングを排除して最適化できます.
次の例を参照すると、理解に役立ちます.
ベロフォードの反応vlpt.us

🍃 最適化の泥沼に陥らない

最適化という言葉では、reactコンポーネント内で宣言するすべての関数にuseCallback()を無条件に使用するのは愚かです.
通常、ソフトウェアのパフォーマンスの最適化には、コードが複雑になったり、メンテナンスが困難になったりするコストがかかり、船よりも大きくなる可能性があります.下のようです.
関数を再使用して節約したコスト<最適化関数を実行するコスト
したがって、useCallback()を使用する前に、実際のパフォーマンスの利点を理解するためにテストして使用する必要があります.

Reference

<DaleSeo/>