遅延読み込みとメモ化 | ReactJS |パート 1

ReactJS のコンテキストにおける遅延読み込みとメモ化の比較、定義、使用例、例:

---

遅延読み込み

定義

React における遅延読み込みとは、最初のページ読み込み時ではなく、必要なときにのみコンポーネントやリソースを読み込む方法を指します。これにより、初期ロード時間が短縮され、パフォーマンスが向上します。

重要なポイント

目標: 初期バンドル サイズを削減し、パフォーマンスを最適化します。

使用する場合: すぐに必要ではないコンポーネントまたはアセット (例: 非表示のタブ内のモーダルまたは画像)。

React 機能: React.lazy と Suspense を使用して実現されます。

例: コンポーネントの遅延ロード

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

const App = () => {
戻る (

私のアプリへようこそ

読み込み中...}>



);
};

デフォルトのアプリをエクスポート;

動作: HeavyComponent はレンダリング時にのみロードされます。

---

メモ化

定義

React におけるメモ化は、不必要な再計算や再レンダリングを避けるために、関数またはコンポーネントのレンダリングの結果をキャッシュするプロセスです。冗長な操作を防止することでパフォーマンスの向上に役立ちます。

重要なポイント

目標: コストのかかる再計算や再レンダリングを回避します。

使用する場合: 同じ props を繰り返し受け取る、計算量の多い関数またはコンポーネント用。

React の機能: useMemo、useCallback、および React.memo を使用して実現されます。

例: コンポーネントのメモ化

React をインポート、「react」から { useMemo };

const ExpensiveCalculation = ({ 数値 }) => {
const 計算 = (数値) => {
console.log('計算中...');
数値 * 2 を返します。 // 負荷の高い操作をシミュレートします
};

const result = useMemo(() =>calculate(number), [number]);

return

結果: {result};
};

デフォルトの ExpensiveCalculation をエクスポート;

動作: 計算は数値プロパティが変更された場合にのみ実行され、冗長な計算が回避されます。

---

それぞれをいつ使用するか?

遅延読み込み:
アプリケーションに、必要になるまで延期できる大規模なコンポーネントまたはリソースがある場合に使用します (ダッシュボード グラフや画像を大量に使用するギャラリーなど)。

メモ化:
プロパティや状態が変更されていないために、アプリが繰り返し計算を実行したり、コンポーネントを不必要に再レンダリングしたりする場合に使用します。

以上が遅延読み込みとメモ化 | ReactJS |パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。