著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

React アプリケーションでは、パフォーマンスの問題は、ネットワークレイテンシ、過負荷のAPI、非効率的なサードパーティライブラリ、さらには異常に大きな負荷が発生するまで正常に機能する適切に構造化されたコードに起因する可能性があります。 パフォーマンスの問題の根本原因を特定するのは難しい場合がありますが、これらの問題の多くはコンポーネントの再レンダリングに起因します。 コンポーネントが予想以上に再レンダリングするか、コンポーネントにデータ量の多い操作があり、各レンダリングが遅くなる可能性があります。 このため、不要な再レンダリングを防ぐ方法を学ぶことで、Reactアプリケーションのパフォーマンスを最適化し、ユーザーのエクスペリエンスを向上させることができます。

このチュートリアルでは、Reactコンポーネントのパフォーマンスの最適化に焦点を当てます。 問題を調査するために、テキストのブロックを分析するコンポーネントを作成します。 さまざまなアクションによって再レンダリングがトリガーされる方法と、フックおよびメモ化を使用してコストのかかるデータ計算を最小限に抑える方法について説明します。 このチュートリアルを終えると、useMemouseCallbackフックなど、パフォーマンスを向上させる多くのフックと、それらを必要とする状況に慣れることができます。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.22.0およびnpmバージョン6.14.6でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04