React は、不必要な再レンダリングと再計算を最小限に抑えてコンポーネントのパフォーマンスを最適化するためのメモ化用の 3 つの主要なツールを提供します。
使用法: 特定の依存関係でのみ更新する必要がある高価な計算または派生データに使用します。
const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
ベストプラクティス:
使用法: 安定した関数参照、特に子コンポーネントに渡されるコールバック (イベント ハンドラーなど) に使用します。
const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
ベストプラクティス:
使用法: 親が変更されたときに再レンダリングする必要のない子コンポーネントを最適化するために使用します。
const MemoizedComponent = React.memo(ChildComponent);
ベストプラクティス:
以上がReact メモ化チートシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。