useMemo と useCallback を使用した React アプリの最適化: 完全ガイド-jsチュートリアル-php.cn

useMemo と useCallback を使用した React アプリの最適化: 完全ガイド

Linda Hamilton

リリース： 2025-01-04 07:25:34

オリジナル

134 人が閲覧しました

Optimizing React Apps with useMemo and useCallback: A Complete Guide

useMemo と useCallback を使用した React アプリの最適化

React アプリケーションでは、特にアプリがスケールするにつれてパフォーマンスが鍵となります。このガイドでは、useMemo と useCallback が React コンポーネントを最適化し、不必要な再レンダリングを回避するのにどのように役立つかを説明します。

React で最適化が重要な理由

React の再レンダリング動作は強力ですが、適切に管理しないとパフォーマンスのボトルネックにつながる可能性があります。 useMemo と useCallback は、これらの問題に対処するために設計された 2 つのフックです。

useMemoとは何ですか？

useMemo は計算結果を記憶し、依存関係が変更された場合にのみ計算を再計算します。

構文：

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

ログイン後にコピー

例：

React コンポーネントでの高コストの計算を想像してください:

import React, { useMemo } from "react";

function ExpensiveComponent({ a, b }) {
  const expensiveValue = useMemo(() => {
    console.log("Calculating...");
    return a + b;
  }, [a, b]);

  return <div>Result: {expensiveValue}</div>;
}

ログイン後にコピー

useMemo を使用しない場合、a または b が変更されていない場合でも、この計算はレンダリングごとに実行されます。

useCallbackとは何ですか?

useCallback は関数インスタンスを記憶し、依存関係が変更された場合にのみ再作成されるようにします。これは、コールバックを子コンポーネントに渡すときに特に便利です。

構文：

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

ログイン後にコピー

例：

不必要な子の再レンダリングを回避します:

import React, { useCallback } from "react";

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click Me</button>;
}

ログイン後にコピー