react中のuseMemoの使い方は何ですか？

1年 ago
陽, 向宇
1 minute

useMemoはReactのHookの1つで、パフォーマンスを最適化するために使用されます。関数と依存配列を受け取り、関数の計算結果を返します。

useMemoの目的は、毎回レンダリングする際に関数を再計算することを避けて、パフォーマンスを向上させることです。依存配列の値が変更されると、useMemoは関数の結果を再計算します。依存配列の値が変更されていない場合、前回の計算結果を再利用します。

useMemoを使用する場面は、通常、コンポーネントのレンダリング中に複雑な計算が必要な場合や、高価な処理を最適化する場合です。たとえば、多くのデータのフィルタリング、ソート、フォーマットなどが該当します。

useMemoの基本的な使い方は次のとおりです：

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  const expensiveCalculation = useMemo(() => {
    // 进行一些复杂的计算
    return data.filter(item => item > 5);
  }, [data]);

  return (
    <div>
      {expensiveCalculation.map(item => (
        <span key={item}>{item}</span>
      ))}
    </div>
  );
};

上記の例では、expensiveCalculationはデータに依存する計算結果です。データが変化すると、useMemoはexpensiveCalculationの値を再計算します。データが変化しない場合は、前回の計算結果を再利用します。これにより、毎回高コストな計算を行うことなく、パフォーマンスを向上させることができます。

bannerAds