React アプリケーションを最適化してパフォーマンスを最大化する

導入

私は 3 年以上 React コードを書いてきました。ただし、私が当初焦点を当てていなかったのは、React のパフォーマンスの最適化でした。ほとんどの場合、技術的負債が蓄積され、パフォーマンスを最適化することが困難になります。

最初から最適化に集中するのは非常に困難ですが、多大な技術的負債を避けるために、時々最適化をスケジュールすることができます。

React の最適化テクニックのいくつかを見ていきます。これはコードを書きながら実装できます。別の方法ではなくこの方法を選択することが問題です。

それでは、始めましょう。

1. 大きなリストの最適化

React にはコンポーネントがあるため、リストのレンダリングは非常に一般的です。大きなリストをレンダリングすることは、レンダリングが遅くなり、メモリ使用量が遅くなる可能性があるため、困難です。仮想化は、このような問題に対処する最良の方法です。表示されているリストのみを単純にレンダリングし、他の項目は必要に応じてレンダリングされます。

React Window と React Virtualized は、仮想化リストの人気のあるライブラリです。ビューポートに表示される項目のみをレンダリングするため、一度にレンダリングされる DOM ノードの数が大幅に減少します。

これは React Window の例です:

リーリー

---

2.メモを使用する

useMemo は、計算の結果を記憶する React フックです。したがって、依存関係に変更がない限り、計算の複数の処理は許可されません。これは、関数または計算が高価であり、レンダリングのたびに再実行する必要がないシナリオでパフォーマンスを最適化するのに役立ちます。

useMemo の構文は次のとおりです:

リーリー

ご覧のとおり、useMemo は 2 つの引数を取ります:

• 記憶できるように値を返す関数。
• 記憶された値をいつ再計算するかを決定する依存関係の配列。

使用メモの例は次のとおりです:

リーリー

---

3. コード分割

従来のセットアップでは、アプリケーションのすべてのコンポーネントが 1 つのファイルにバンドルされています。コード分割は、アプリケーションをより小さなチャンクに分割するための最適化手法です。より小さなコンポーネントをロードし、他の不要なコンポーネントを回避することで、アプリケーションのロード時間が短縮されます。

コード分割の例を次に示します:

リーリー

---

4.遅延ロードに反応する

React.Lazy は、コンポーネントの読み込みを最適化するための重要なメソッドです。これにより、コンポーネントを遅延ロードできるようになります。これは、そのコンポーネントが必要な場合にのみロードされることを意味します。これを使用すると、アプリケーションをより小さなコンポーネントに分割し、オンデマンドでロードできます。

React.lazy() はコンポーネントを動的にインポートするために使用されます。コンポーネントが必要になると、非同期でロードされ、それまではフォールバック UI (ロード スピナーなど) を表示できます。

Lazy Loadの例を次に示します:

リーリー

---

スロットリングとデバウンス

これは React に特有のものだけでなく、関数を呼び出すときの一般的なプログラミングにも当てはまります。スロットリングは、関数が実行される頻度を定義する手法です。関数が調整されている場合、イベントがトリガーされた回数に関係なく、指定された時間間隔内で関数の実行が許可されるのは 1 回だけです。たとえば、ボタンが頻繁に呼び出されないようにするために、ボタンのクリックにスロットルを追加します。

スロットルの例:

リーリー

デバウンスは、関数の呼び出し後、一定の時間が経過した後に関数が実行されるようにするために使用されます。イベントが繰り返し発生する場合、デバウンス関数は、指定された遅延期間にわたってイベントの発生が停止した後にのみ実行されます。たとえば、ユーザーが検索入力を入力し、候補を提供する場合、ユーザーが入力を完了するまで関数を呼び出す前に数ミリ秒待機します。

デバウンスの例:

リーリー

私とつながってください

テクノロジー、イノベーションなど、あらゆるものについてつながり、最新情報を入手しましょう! ?

• ツイッター
• リンクトイン

結論

React アプリケーションの最適化は、特に複雑さとサイズが増大するにつれて、アプリケーションがスムーズかつ効率的に実行されるようにするために重要です。リストの仮想化、useMemo によるメモ化、コード分割、遅延読み込み、スロットリング、デバウンスなどのテクニックを組み込むことで、React アプリケーションのパフォーマンスを大幅に向上させることができます。

この方法が React アプリケーションのパフォーマンスの最適化に役立つことを願っています。記事を読んでいただきありがとうございます

以上がReact アプリケーションを最適化してパフォーマンスを最大化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。