「useMemo」と「useCallback」を理解する: 包括的なガイド

useMemo と useCallback は、コンポーネントのパフォーマンスを最適化する不必要な再レンダリングを防止する上で重要な役割を果たす 2 つの強力な React フックです。これらは、開発者が応答性が高く効率的な React アプリケーションを作成するために不可欠なツールです。

このガイドでは、useMemo と useCallback の類似点と相互の違いについて詳しく説明します。それらの実装方法と、それぞれをいつ使用するかを理解します。

なぜ useMemo または useCallback を使用する必要があるのですか

通常、React ではほとんどの計算が高速ですが、非常に大きな配列の計算や、再レンダリングのたびに実行する必要のない高価な計算が必要になる場合があります。

useMemo フックと useCallback フックは、再レンダリングの間に高価な計算をキャッシュすることで、この問題の解決に役立ちます。

useMemoとは何か、そしてその使い方。

useMemo は再レンダリング間の計算結果をキャッシュする React フックであり、2 つの引数を取ります:

• TranslatedValue: キャッシュする値を計算する関数。関数はパラメータを受け入れず、純粋である必要があり、あらゆる種類の値を返す必要があります。 React は、依存関係が変更されていない場合は同じ計算結果を返します。それ以外の場合は、新しい結果を計算してキャッシュします。
• 依存関係: ステート変数、定数、および関数呼び出しからの、計算値内にあるすべてのリアクティブな値参照のリスト。 React は、Object.it 比較を使用して、各 reactive 値を以前の値と比較しようとします。

useメモの使用法

再レンダリングの間に計算をキャッシュするには、コンポーネントのトップレベルで useMemo フックをラップします。

useMemo(fn, 依存関係)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

useMemo の最初のパラメータはパラメータのない関数であることに注意してください。

初めて React は useMemo の最初のパラメーターの結果値を計算し、次に依存関係のリストである 2 番目のパラメーターをメモ化します。 React は、再レンダリングの間に計算結果をキャッシュし、依存関係の値の 1 つが変更された場合にのみ結果を再計算します。

useCallbackとは何か、そしてその使用方法。

useCallback フックは useMemo フックと同じですが、このフックは値を計算せずに関数 (useCallback の最初のパラメーター) をキャッシュする点が異なります。また、この関数は useMemo とは異なりパラメータを受け取ることができます。

useCallback を使用するには、パラメータを渡す必要があります:

• キャッシュする必要がある関数定義。
• 依存関係のリスト

const cachedFn = useCallback(fn, 依存関係)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

useCallback ではなく useMemo を使用する場合

計算結果の最適化に主に関心がある場合は、useMemo を使用してください。
関数の変更による不必要な再レンダリングの防止を主に考慮している場合は、useCallback を使用してください。

コンポーネントの再レンダリングをスキップする

場合によっては、親コンポーネントを再レンダリングする必要があり、その結果、子コンポーネントも再レンダリングされます。メモを使用してコンポーネントをキャッシュすることができます。

テーマ状態を持つ Todolist コンポーネントと、子として List コンポーネントがあると仮定します。テーマの状態が変化するたびに、リスト コンポーネントが再レンダリングされますが、これは必要ありません。この問題を解決するには、メモを使用してください。

List の機能コンポーネントをメモでラップします。

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

結論

この包括的なガイドでは、useMemo フックと useCallback フックを理解し、それぞれの使用方法、いつ使用するか、そして React アプリケーションのパフォーマンスを最適化するための利点について説明しています。

以上が「useMemo」と「useCallback」を理解する: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。