リアクションレンダリングの最適化

注釈

メモリ化とは、コンピュータプログラムが同じ計算を繰り返す必要がある場合に、以前に計算した値をメモリに格納することで、同じ計算を繰り返すことを排除し、プログラムの実行速度を速める技術である.動的計画法の核心技術である.
反応する注釈は現在、以前の値のみが注釈されています.

const Memoized = React.memo(Component)
<!-- 새롭게 렌더링 -->
<Memoized num="{1}" />
<!-- 직전 elements를 사용 -->
<Memoized num="{1}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{2}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{1}" />

メモの理由は二つあります.
1.パフォーマンスを向上させるために高価な演算を繰り返さない
2.安定した値を提供する
reactionは、注釈の作成に3つのAPIを提供します.
1. React.memo 2. useMemo 3. useCallbackReact.memoを使用して、再レンダリングが必要な場合にのみ再レンダリングするように構成部品を設定します.useMemoは、コメントされた値(関数が実行され、返された結果)を返します.useCallbackは、注釈が完了したコールバックを返します.

構成部品が再レンダリングされた場合

state、props更新時

親構成部品のレンダリング時

shouldComponentUpdateがtrueを返すとき

強制更新運転時

useMemo

応答ホストの1つとして、CPUが応答中に消費する重大な関数をキャッシュするために使用される.
関数が構成部品内で値を返し、どの変化においても値を返すのに時間がかかる場合は、構成部品を再レンダリングするたびに関数が呼び出され、時間がかかります.

useCallback

function App() {
  const [body, setBody] = useState()
  const fetchOptions = {
    method: 'POST',
    body,
    headers: { 'content-type': 'application/json' },
  }

  const callApi = () => (body ? fetch('/url', fetchOptions) : null)

  useEffect(() => {
    const result = callApi()
    if (!result) return
  }, [callApi])

  return <>...</>
}

callapiは、構成部品の再レンダリングのたびに作成されます.
この値を安定させるには、useCalbackを使用する必要があります.

それ以外は

useRef

場合によっては、反応器から特定の元素の大きさを選択したり、焦点などの特定のDOMを設定したりする必要がある.
また、クエリーおよび変更可能な変数を構成部品内で管理することもできます.
userefを使用して変数を管理する場合、変数を更新するために構成部品を再レンダリングすることはありません.

要素に焦点を当てる必要がある場合、

.

属性値の初期化が必要です(clear)
ex.setIntervalやsetTimeoutなどの関数をクリアしないと、メモリ

が大量に消費されます.

構成部品のプロパティ情報を照会および変更する場合は、再レンダリングする必要はありません.
ex.setInterval,setTimeoutで作成したid,スクロール位置