流暢なReact

第5章. よくある質問と強力なパターン

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

Reactが何をするのか、そしてそれがフードの下でどのように動作するのかを理解したところで、Reactアプリケーションの書き方について、その実用的なアプリケーションをもう少し深く掘り下げてみよう。この章では、Reactのよくある疑問に対する答えを探り、メモ化、遅延ロード、パフォーマンスに関する流暢さを高めていく。まずはメモ化について話そう。

React.memoによるメモ化

メモ化 は、コンピュータ・サイエンスにおいて、以前に計算された結果をキャッシュすることで、関数のパフォーマンスを最適化するテクニックである。簡単に言うと、メモ化は入力に基づいて関数の出力を保存し、関数が同じ入力で再度呼び出された場合、出力を再計算するのではなく、キャッシュされた結果を返すようにする。これにより、特に計算量の多い関数や頻繁に呼び出される関数の実行に必要な時間とリソースが大幅に削減される。メモ化は関数の純粋性に依存している。関数の純粋性とは、与えられた入力に対して同じ出力を返すことが予測できる関数の定義である。純粋関数の例を以下に示す：

function add(num1, num2) {
  return num1 + num2;
}

このadd 関数は、引数の1 と2 が与えられると常に3 を返すので、安全にメモ化できる。もしこの関数がネットワーク通信のような副次的効果に依存していれば、メモ化できないだろう。 例えば、次のように考えてみよう：

async function addToNumberOfTheDay(num) {
  const todaysNumber = await fetch("https://number-api.com/today")
    .then((r) => r.json())
    .then((data) => data.number);
  return num + todaysNumber;
}

入力2 、この関数は毎日異なる結果を返すので、メモ化することはできない。愚かな例かもしれないが、この例を通して基本的なメモ化を大まかに理解することができる。

メモ化は、高価な計算を扱うときや、大きなリストをレンダリングするときに特に役立つ。ある関数を考えてみよう：

let result = null;
const doHardThing = () => {
  if (result) return result;

  // ...do hard stuff

  result = hardStuff;
  return hardStuff;
};

doHardThing を1回呼び出すと、大変なことをするのに数分かかるかもしれないが、2回目、3回目、4回目、あるいはn回目に呼び出すと、実際には大変なことは行われず、代わりに保存された結果が返される。これがメモ化の要点である。

Reactのコンテキストでは、React.memo コンポーネントを使用して、メモ化を機能コンポーネントに適用することができる。この関数は、propsが変更された場合にのみ 、再レンダリングする新しいコンポーネントを返す。第4章に基づき、理想的には、"rerender "は関数コンポーネントを再呼び出すことを意味する。React.memo でラップされた場合、関数は、そのプロップが変更されない限り、リコンシリエーション中に再度呼び出されることはない。関数コンポーネントをメモ化することで、不要な再レンダリングを防ぐことができる ...