React : useCallback と useMemo

これらは両方とも React の最適化フックですが、目的は少し異なります。

詳しく見てみましょう:

1.目的:

• useCallback は関数をメモ化するために使用されます。
• useMemo は値をメモ化するために使用されます。

2.返される内容:

• useCallback はメモ化されたコールバック関数を返します。
• useMemo は、任意の型のメモ化された値を返します。

3.使用例:

• useCallback は通常、不必要なレンダリングを防ぐために参照の等価性に依存する最適化された子コンポーネントにコールバックを渡すときに使用されます。
• useMemo は、レンダリングごとに負荷の高い計算を回避するために使用されます。

4.構文:

   const memoizedCallback = useCallback(
     () => {
       doSomething(a, b);
     },
     [a, b],
   );

   const memoizedValue = useMemo(
     () => computeExpensiveValue(a, b),
     [a, b]
   );

5.パフォーマンスへの影響:

• useCallback は、コールバックを prop として受け取る子コンポーネントの不必要な再レンダリングを防ぐのに役立ちます。
• useMemo は、依存関係が変更されていない場合に、コストのかかる再計算を回避するのに役立ちます。

違いを説明するためにいくつかの例を見てみましょう:

useCallback の使用例:

import React, { useState, useCallback } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Increment</button>;
});

この例では、useCallback を使用して handleClick 関数をメモ化します。 ChildComponent は React.memo でラップされているため、これは便利です。つまり、props が変更された場合にのみ再レンダリングされます。 useCallback を使用することで、handleClick がレンダリング間で同じ参照を維持し (カウントが変更されない限り)、ChildComponent の不必要な再レンダリングを防ぎます。

useMemo の使用例:

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ list }) => {
  const sortedList = useMemo(() => {
    console.log('Sorting list');
    return [...list].sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      <h2>Sorted List:</h2>
      {sortedList.map(item => <div key={item}>{item}</div>)}
    </div>
  );
};

const ParentComponent = () => {
  const [list] = useState([3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]);
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComponent list={list} />
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
};

この例では、並べ替えられたリストをメモ化するために useMemo が使用されています。コストのかかる並べ替え操作は、ExpensiveComponent のレンダリングごとではなく、リスト プロパティが変更されたときにのみ実行されます。 ParentComponent はリストに関係のない理由 (カウントが変更された場合など) で再レンダリングされる可能性があり、リストを不必要に再ソートしたくないため、これはここで特に役立ちます。

重要なポイント:

1. 関数参照に依存する子コンポーネントの不必要な再レンダリングを防ぎたい場合は、useCallback を使用します。
2. コストのかかる値の再計算を避けたい場合は、useMemo を使用してください。
3. どちらのフックもパフォーマンスの最適化に役立ちますが、慎重に使用する必要があります。使いすぎると、パフォーマンスが大幅に向上せずに複雑さが増す可能性があります。
4. 両方のフックの依存関係配列は重要です。メモ化された値/関数は、依存関係の 1 つが変更された場合にのみ更新されます。

このようなコンテンツをもっと見るにはフォローしてください!

以上がReact : useCallback と useMemoの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。