Memoization

コンピュータが同じ計算を繰り返す必要がある場合、以前に計算した値をメモリに格納して、繰り返し実行を低減し、プログラムの実際の実行速度を速める技術です.

アルゴリズムのコメント

主にアルゴリズムで動的計画法の問題を解く際に用いられる構造であり,これとは反対の概念は「Boottom up」である.全体的な構造は次のとおりです.
作成

再帰コード

の戻り値を記憶し、再帰呼び出しに使用します.

JSでのコメント

closure

高次関数(関数が関数を返す場合)

useMemo

不要な場合に構成部品を再レンダリングするときのリソースの浪費を防ぐ
userMemoを使用してパフォーマンスを最適化します.

import { useMemo, useState } from "react"
import "./App.css"

function App() {
  const example = (users) => {
    console.log("example 함수 실행")
    return users.filter((user) => user).length
  }

  const [users, setUsers] = useState([false, false, false])
  const [ex, setEx] = useState(false)
  const handleClick = (i) => {
    users[i] = !users[i]
    setUsers([...users])
  }

  const handleInput = () => {
    setEx(!ex)
  }
  // const check = example(users)
  const check = useMemo(() => example(users), [users])
  return (
    <>
      <h1>check circle +{check}</h1>
      <input onInput={handleInput} type="text" />
      {users.map((e, i) => {
        return e ? (
          <div key={i} onClick={() => handleClick(i)} className="red circle" />
        ) : (
          <div key={i} onClick={() => handleClick(i)} className="blue circle" />
        )
      })}
    </>
  )
}

export default App

userMemoを使用せずに次のコードを実行すると、count関数がユーザー数の増加または減少に関係なく実行されることを確認できます.

useMemo(演算方法を定義する関数、依存配列(deps配列)
ex) const check = useMemo(() => example(users), [users])useMemoを使用する場合、関数は依存配列で作成された変数が変更された場合にのみ機能します.他の理由で再レンダリングされた場合は機能しません.

useCallback

useMemoがuseMemoと同様のhookを使用して結果値を保存して再使用する場合、useCallbackは関数の再使用時に使用されます.これらの関数は、構成部品を再レンダリングするたびに作成されます.
関数にPropsが使用されている場合は、deps配列に含める必要があります.

useCallback xの使用

useCallbackの使用

レンダリング時の両者の違いは明らかではありません.ただし、propsを変更せずに仮想DOM->React.memoが再レンダリングされないことを確認するには、このように関数を最適化する必要があります.

useEffect vs useMemo vs useCallback

userEffectと比較して、ページは最初のレンダリングで異なると思いますが、実際には両方の関数が最初のレンダリングで実行されているように見えます.

useMemoはuseEffectと似ていますが、実行する時点が異なります

useMemoはlocal callであり、このコンポーネントを使用してのみいくつかの操作を実行できます.userEffectは、非同期かどうかにかかわらず、すべての非同期要素のレンダリングが終了した後に実行されます.
userMemo->userLayoutEffect->userEffectの順に実行します.

値を保存し、繰り返し実行をブロックします。

Memoizationのために、usemoは리턴값を保存し、必要に応じて取り出して使用する.
useCallbackは함수を格納して使用する.useEffectでは最適化できません.

React.memo

React.memo
UI性能を向上させるために、Reactは高差コンポーネント(HOC)React.memo()を提供する.React.memo()にマッピングされたレンダリング結果を保存し、次回のレンダリング時にPropsが同じ場合は、不要な再レンダリングを防ぐためにアノテーションIDの内容を再使用します.関数要素に適用します.

propsが同じかどうかを確認する方法

propsまたはpropsのオブジェクトを比較するときに浅い比較を実行します.
比較方法を変更したい場合はReact.memoの2番目のパラメータを使用して比較関数を作成し、渡します.
比較関数がtrueを返すと、2つのオブジェクトは同じオブジェクトとみなされます.React.memo(component, [equalFuc(a, b)])

React.memo()の使用を推奨

同じpropsでよくレンダリングされるコンポーネント

親構成部品が常に再レンダリングされる場合、子構成部品に変化がない場合は、再レンダリングが発生しないように、子構成部品が再レンダリングされます.memoの使用を推奨

React.memo()の使用は推奨されません。

上記の推奨でない場合は、可能な限り使用することを推奨しません.

クラスベースの構成部品の場合。

クラスベースの構成部品を最適化する必要がある場合は、PureComponentまたはshouldComponentUpdate()メソッドの実装を拡張することを推奨します.

頻繁にPropsを交換する

propsを頻繁に変更する場合は、propsが同じ場合にメモリ最適化されるため、使用する必要はありません.

props伝達関数の使用

関数は、通常のオブジェクトと比較する場合にのみ、通常のオブジェクトと同じ比較原則(true)を有します.
この場合はuseCallback()を使用します
useCallback()を使用して、同じ関数を返すために関数インスタンスを保持します.