メモ化で React アプリのパフォーマンスを向上: useMemo、useCallback、React.memo の探索

Web サイトのパフォーマンスを向上させることは、ユーザー エクスペリエンスを向上させ、堅牢で応答性の高いインターフェイスを確保するための重要なステップです。リソースを大量に消費するコンポーネントを含む React または Next.js プロジェクトに取り組んでいる場合、パフォーマンスへの影響を心配するのは当然です。ここで React のメモ化が役に立ちます。これは、これらの「高価な」コンポーネントを高速化し、ユーザーのエクスペリエンスをよりスムーズにします。

この記事では、メモ化について説明し、useMemo()、useCallback()、React.memo 上位コンポーネント (HOC) など、アプリのパフォーマンスを最適化できる React フックを紹介します。飛び込んでみましょう!

React のメモ化とは何ですか?

メモ化は、関数呼び出しなどの計算タスクの結果をキャッシュすることでプログラムを高速化するために使用される手法です。これにより、同じ入力が再度提供された場合、再計算する代わりにキャッシュされた結果が返されます。

useMemo フック: React での結果のキャッシュ

useMemo は、コンポーネントの再レンダリングまたは更新の間に関数の結果をキャッシュまたはメモ化するフックです。

このフックを使用すると、コンポーネント内の関数の結果をキャッシュでき、次回の再レンダリング時に、その関数の入力が変更されていなければ、コンポーネントはキャッシュ結果を使用します。

useMemo の実装方法:

useMemo は、最適化されていない関数をコールバックおよび依存関係のリストとして受け取るフックです。 React は、最初のレンダリング時またはその後の再レンダリング時にこの関数をいつ呼び出すかを決定します。

• 初期レンダリング: 初期レンダリング中に、React は useMemo 関数を呼び出し、指定したコールバック関数の結果を計算して保存します。

• 再レンダリング: 再レンダリング時に、React は useMemo を呼び出して、依存関係が変更されたかどうかを確認します。依存関係が変更されていない場合、React は最後のレンダリング中に保存されたキャッシュされた値を再利用します。ただし、依存関係が変更された場合、useMemo はコールバック関数を再度呼び出して、更新された値を再計算してキャッシュに保存します。

例:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

squaredNumber は、数値が変更された場合にのみ計算されます。 useMemo はこの計算をキャッシュするため、レンダリングのたびに不必要に再計算されなくなります。

useCallback フック: 関数定義のキャッシュ

useCallback は、コンポーネントの再レンダリングまたは更新の間に関数の定義をキャッシュまたはメモ化するフックです。

このフックを使用すると、再レンダリングをまたいで関数の定義を保存できるため、関数の依存関係が変更されない限り、React はこのキャッシュされたバージョンを再利用します。

useCallback の実装方法:

useCallback は、関数 (コールバックとして) と依存関係のリストを受け取るフックです。次に、React は、最初のレンダリング時または後続の再レンダリング時に、いつこの関数を返す (呼び出さない) かを決定します。

• 初期レンダリング: 初期レンダリング中に、React は useCallback を呼び出して、コールバックとして渡した関数を保存します。

• 再レンダリング: 再レンダリング時に、React は useCallback を呼び出して依存関係が変更されたかどうかを確認します。依存関係が変更されていない場合、React は最後のレンダリング中に保存されたキャッシュされた関数を再利用します。依存関係が変更された場合、useCallback は更新された関数を保存して返します。

例:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

React.memo 関数: 不必要な再レンダリングの防止

ご存知のとおり、親コンポーネントと子コンポーネントがある場合、親の状態またはプロパティを更新すると、そのすべての子コンポーネントが再レンダリングされます。小規模なプロジェクトでは、これは問題にならない可能性がありますが、大規模で複雑なアプリケーションでは、子コンポーネントの不必要な再レンダリングがパフォーマンスに影響を与える可能性があります。これに対処するために、React は memo() 関数を提供します。

メモ (または React.memo) 関数を使用すると、コンポーネントをラップして、親が更新されたときにコンポーネントが再レンダリングされないようにすることができます。ラップされたコンポーネントは、それ自体のプロパティまたは状態が変更された場合にのみ再レンダリングされます。

コンポーネントで最初に memo() を呼び出すと、React はコンポーネントをレンダリングしてキャッシュします。後続のレンダリングでは、コンポーネントのプロパティと状態が変更されない限り、React はこのキャッシュされたバージョンを使用します。 memo() は、変更されていない props と state の再レンダリングのみを回避することに注意してください。変更されると、memo() は再レンダリングし、それに応じてキャッシュされたコンポーネントを更新します。

React.memo の実装方法:

コンポーネントにメモを実装するには、memo() または React.memo() を使用して、不要な再レンダリングを防止したいコンポーネントをラップするだけです。

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

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  // Memoize the callback with `count` as a dependency
  const calculate = useCallback(() => {
    console.log("Calculating:", count * multiplier);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier + 1)}>Increment Multiplier</button>
      <button onClick={calculate}>Calculate</button>
    </div>
  );
};

export default MyComponent;

注:
オブジェクトを、memo() でラップされたコンポーネントにプロップとして渡すと、オブジェクトが変更されていなくても、コンポーネントは更新のたびに再レンダリングされます。これは、React が Object.is を使用して以前のプロパティと現在のプロパティを比較するために発生します。 Object.is(3, 3) は true を返しますが、2 つの異なるオブジェクト参照は決して等しいとはみなされないため、Object.is({}, {}) は false を返します。

これを回避するには、useMemo を使用してオブジェクトをキャッシュし、レンダリング間で同じ参照を保持します。

import React from 'react';

const MyComponent = ({ data }) => {
  return <div>{data.value}</div>;
};

export default React.memo(MyComponent);

この例では、useMemo によってデータ オブジェクトが同じ参照を持つようになり、MyComponent の不必要な再レンダリングが防止されます。

私の記事を読んでいただきありがとうございます! Next.js、React、JavaScript などについてさらに詳しく知りたい場合は、お気軽に私の Web サイト saeed-niyabati.ir をフォローしてください。ご質問がございましたら、お気軽にお問い合わせください。また次回お会いしましょう!

以上がメモ化で React アプリのパフォーマンスを向上: useMemo、useCallback、React.memo の探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。