React の useCallback と useMemo を理解する: 主な使用例とベスト プラクティス

React は、開発者が動的で効率的なユーザー インターフェイスを構築できるようにし、そのフック API は関数コンポーネントの状態とライフサイクル管理に革命をもたらしました。これらのフックの中で、useCallback と useMemo はパフォーマンスを向上させるツールとして際立っています。ただし、不必要な複雑さを加えずにそれらの可能性を最大限に引き出すには、それらをいつどのように効果的に使用するかを知ることが重要です。

この包括的なガイドでは、より高速で効率的な React アプリケーションの構築に役立つ useCallback と useMemo の内部動作、使用例、ベスト プラクティスについて説明します。

useコールバック

useCallback フックはコールバック関数をメモ化するために使用され、依存関係が変更されない限り、レンダリングごとにその関数が再作成されるのを防ぎます。これは、最適化のために参照の等価性に依存する子コンポーネントにコールバックを渡す場合に特に便利です。

構文：

重要なポイント:

関数をメモ化します: 依存関係が変更されない限り、関数の同じインスタンスがレンダリング全体で使用されるようにします。

パフォーマンスの向上: コールバックを渡すときに子コンポーネントでの不必要なレンダリングを回避できます。

依存関係配列: 配列内の依存関係の 1 つが変更された場合にのみコールバックを再作成します。

使用例:

1. メモ化されたコンポーネントに関数を渡す

React.memo を使用して子コンポーネントを最適化する場合、useCallback によってコールバック プロパティが不必要に変更されず、子の再レンダリングが防止されます。

子コンポーネント:

2. イベントハンドラ

子コンポーネントに渡されるイベント ハンドラーに useCallback を使用すると、レンダリング間でイベント ハンドラーが安定します。

3. インライン関数の回避

プロップ内のインライン関数はレンダリングのたびに再作成されます。 useCallback は安定した参照を提供することでこれを回避します。

使用メモ

useMemo フックは計算結果をメモ化するために使用され、依存関係が変更された場合にのみ再計算されるようにします。これは、負荷の高い計算や派生状態の場合に役立ちます。

構文：

重要なポイント:

値をメモ化: 不必要な再計算を避けるために計算結果を保存します。

パフォーマンスの向上: 高価な計算や頻繁にレンダリングされるコンポーネントに特に役立ちます。

依存関係配列: 依存関係の 1 つが変更された場合にのみ値を再計算します。

使用例:

1. 高価な計算

コンポーネントに複雑な計算が含まれる場合、useMemo は必要な場合にのみ計算が実行されるようにします。

2. 大きなリストのフィルタリングまたは並べ替え

フィルターされたリストまたは並べ替えられたリストをレンダリングする場合、useMemo はリストまたはフィルター基準が変更された場合にのみ再計算することでプロセスを最適化できます。

3. 派生状態

useMemo を使用すると、他の状態変数に依存する状態を導出し、不必要な再計算を回避できます。

ベストプラクティス

時期尚早な最適化を避ける: useCallback と useMemo は、明らかなパフォーマンス上の利点がある場合にのみ使用してください。使いすぎるとコードが複雑になり、大きなメリットは得られない可能性があります。

アプリケーションのプロファイリング: メモ化を導入する前に、React DevTools を使用してパフォーマンスのボトルネックを特定します。

依存関係を正確に保つ: バグを防ぐために、コールバックまたは計算内で使用されるすべての変数が依存関係配列に含まれていることを確認します。

参照の等価性を理解する: 参照の不等価性により props が変更されると、React がコンポーネントを再レンダリングすることを理解します。 useCallback と useMemo は、この問題に効果的に対処します。

他のフックと組み合わせる: これらのフックを React.memo またはコンテキストと組み合わせて、大規模なアプリケーションのパフォーマンスを向上させます。

結論

useCallback と useMemo は React アプリケーションを最適化するための貴重なツールですが、慎重に使用する必要があります。コンポーネントの仕組みとユースケースを理解することで、コンポーネントのパフォーマンスと保守性を確保できます。パフォーマンスへの影響を常に測定し、コードの可読性を優先して適切なバランスをとってください。

以上がReact の useCallback と useMemo を理解する: 主な使用例とベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。