React Nativeのパフォーマンスを最適化したいですか？ すべきこととすべきでないこと

公開: 2022-04-06

ネイティブアプリは、モバイルアプリケーションを構築する方法です。 ただし、2015年に、Facebook（現在のMeta）は、Reactベースのフレームワークがモバイル開発に移行する機会を見出し、企業がハイブリッドアプリを構築するのを支援するReactNativeを作成しました。

2015年にFacebookによって作成されたReactNativeは、iOS、Android、およびMicrosoftUWPアプリケーションの開発を支援します。 多くの企業は、ネイティブアプリとクロスプラットフォームアプリのどちらを構築するかを決めるのに混乱したり、苦労したりしています。

2019 Stack Overflowの調査に基づくと、React Nativeは6番目に人気のある開発者フレームワークであり、多くの有名企業がモバイルアプリにReactNativeを使用していることがわかりました。

さて、問題は、なぜ多くの企業がモバイルアプリにReactNativeを使用するのかということです。

ReactNativeアプリ開発サービスプロバイダーまたは企業がReactNativeを使用する理由を見てみましょう。
高速です。個々のプラットフォームで個別に実行する必要があるいくつかの変更を除いて、AndroidアプリとiOSアプリの両方で同じコードベースを使用できるため、時間はかかりません。

アプリの外観はネイティブに似ています： React Native開発者は、単一のコードベースが使用されている場合でも、AndroidおよびiOSアプリのネイティブに似たルックアンドフィールを取得できます。

React Nativeのパフォーマンス：React Nativeで構築されたアプリは、この言語がさまざまなモバイルデバイス用に最適化されているため、優れたパフォーマンスを発揮します。 また、これらのアプリはCPUではなくGPUをサポートしているため、速度とパフォーマンスが向上します。

信頼性は問題ではありません。Airbnb、Instagram、UberEatsなどの大企業がReactNativeを使用している場合は、試してテスト済みとしてマークを付けることができます。

開発者にとって使いやすいです。ReactNativeはコミュニティ主導型であり、Github ReactNativeCommunityにアクセスしてしっかりとした議論を行うことができます。 開発者が問題を解決できるReactifluxという名前の巨大なチャットサーバーもあります。

重要なのは？ ユーザーエクスペリエンスとReactNativeのパフォーマンス

ユーザーエクスペリエンスは、アプリを作成または中断する唯一のものです。 ただし、React Nativeは、開発者が優れたパフォーマンスを備えたアプリを開発するために必要なほとんどすべてのものを提供します。

ほとんどのモバイルデバイスには60Hzのディスプレイが付属しています。 開発者は、優れたパフォーマンスを提供するためにアプリのフレームを表示するために16.67ミリ秒を取得します。 アプリがこれを下回ると、パフォーマンスが低下し、UIが応答しなくなる可能性があります。

React Nativeのパフォーマンスを向上させたいですか？ はいの場合、React Nativeの推奨事項と禁止事項を知っておく必要がありますか？
はい、それではそれを手伝いましょう。

すべきこと

1.適切なナビゲーション戦略を使用する

React Nativeチームがナビゲーションに関連する問題に対処するために取り組んでいて、それらの多くを修正してから長い時間が経ちましたが、シームレスなエクスペリエンスを提供するために修正する必要があるものがたくさんあります。 画面間のナビゲーションが難しいと、ユーザーがアプリを使用できなくなる可能性があります。

  • iOSナビゲーター：iOS専用で、Androidでは役に立ちません。
  • ナビゲーター：小さなアプリケーションとプロトタイプ開発でのみ機能します。 （複雑なアプリケーションや高性能のアプリケーションでは機能しません）
  • ナビゲーション実験：複雑なアプリケーションには適していますが、実装中は非常に複雑です。 誰もがそれを好むわけではありません。
  • Reactナビゲーション：多くのアプリで使用され、頻繁に広く推奨されています。 軽量で、小規模および大規模の両方のアプリケーションに適しています。

2.画像​​をキャッシュしてください

画像はReactNativeによって提供され、画像を表示するために使用されるコアコンポーネントですが、次のような問題に対するすぐに使えるソリューションはありません。

  • 一般的にパフォーマンスが低く、キャッシュの読み込み
  • 画像のちらつき
  • 1つの画面にレンダリングする画像が多すぎます

ただし、react-native-fast-imageなどのサードパーティライブラリを使用すると、これらの問題を簡単に解決できます。 このライブラリはiOSとAndroidの両方で利用でき、非常にうまく機能します。

3.nativeDriverでアニメーションライブラリを利用する

React Nativeでは、アニメーションライブラリはReactNativeアプリでアニメーションをレンダリングするための最も一般的な方法の1つです。 nativeDriverの助けを借りて、アニメーションライブラリは、アニメーションが画面上で開始する前に、ネイティブブリッジを介してアニメーションを送信します。 ブロックされたJavaScriptスレッドから独立してアニメーションを実行するのに役立ち、フレームを落とすことなく、よりスムーズでちらつきのないエクスペリエンスを返します。

アニメーションライブラリでnativeDriverを使用する場合は、値をtrueに設定する必要があります。

4.適切な画像サイズを使用することが重要です

アプリが画像に大きく依存している場合のReactNativeのパフォーマンスを考慮すると、画像の最適化は非常に重要です。 これだけ多くの画像をレンダリングすると、画像のサイズが最適化されていない場合、デバイスのメモリ使用量が高くなります。 これは、アプリがクラッシュする可能性があるような大きな失敗につながる可能性さえあります。

ReactNativeAppで画像を最適化する方法は次のとおりです。

  • AndroidとiOSの両方でバイナリサイズを29％削減できるため、JPGを避けてPNG形式を使用するか、WEBP形式を使用してください
  • サイズが小さい画像を使用する

5.オープンソースのJavaScriptエンジンを使用します：'Hermes'

Hermesは、モバイルアプリケーション用に特別に最適化されたオープンソースのJavaScriptエンジンです。 Hermesは、React Nativeバージョン0.60.4以降、Androidプラットフォームで使用できます。 これを使用する利点は、アプリのダウンロードサイズ、メモリ消費量、およびTTI（対話時間）時間を削減できることです。 Reactネイティブバージョン0.64-rc.0以降、HermesはiOSプラットフォームでも利用できます。

いけない

1.巨大なリストをレンダリングしたい場合は、ScrollViewの使用を避けてください

React Nativeでスクロール可能なリストを含むアイテムを表示する場合は、リストを実装する2つの方法があります。

  • ScrollView
  • FlatList

Scrollviewは実装が簡単で、有限数のアイテムのリストを反復処理するためによく使用されます。 このアプローチは優れていますが、リストの項目数が非常に少ない場合に限ります。 比較すると、大量のデータでScrollviewを使用すると、ReactNative全体のパフォーマンスに直接影響を与える可能性があります。

リスト形式で大量のデータを処理するために、ReactNativeはFlatListを提供しています。 FlatListでは、アイテムは遅延ロードされます。 ただし、アプリは一貫性のない、または過剰な量のメモリを使用します。

2.すべてのコンソールステートメントを削除することを忘れないでください

JavaScriptコードのデバッグにはコンソールステートメントが必要ですが、これらは開発目的でのみ使用されます。 バンドルする前にこれらのステートメントを削除するのを忘れた場合、これらのステートメントは深刻なReactNativeのパフォーマンスの問題を引き起こす可能性があります。

また、babel-plugin-transform-remove-consoleなどのプラグインを使用して、これらのステートメントを本番環境から削除することもできます。 ただし、React Nativeアプリケーションに依存関係を追加したくない場合は、手動で削除できます。

3.componentWillUpdateで状態またはディスパッチアクションを更新しないでください

componentWillUpdateライフサイクルメソッドを使用して、更新の準備をすることができます。 状態を設定する場合は、代わりにcomponentWillReceivePropsを使用して簡単に設定できます。安全にプレイしたい場合は、componentWillReceivePropsの代わりにcomponentDidUpdateを使用して、Reduxアクションをディスパッチします。

4.不要なライブラリと機能—それらをすべて削除します

各ライブラリには、ReactまたはReactNativeアプリケーションに残されたフットプリントが付属しています。 したがって、必要なライブラリと機能のみを追加し、他のすべての無関係な依存関係を削除する必要があります。 ナビゲーション、アニメーション、タブ、およびその他の機能は画面の読み込み時間に影響を与えるため、少ないほど良いです。

5.レンダリング中の無名関数—避けてください

開発者が悪い習慣と呼ぶのは、「render（）で関数を作成する」ことです。これは、ReactNativeの深刻なパフォーマンスの問題につながるためです。 コンポーネントが再レンダリングされるたびに異なるコールバックが作成されますが、これは小さなコンポーネントでは問題になりません。

ただし、PureComponentsとReact.memo（）に関しては、または関数が子コンポーネントに小道具として渡される場合、深刻な問題になります。

Instagram：ReactNativeを正しく利用する

Metaが所有する写真共有ソーシャルプラットフォームInstagramであるReactNativeの作成者は、その良い例の1つです。
Instagramの主な操作モードは現在デジタル写真と短いビデオです。 2016年、InstagramはReactive Nativeへの切り替えを真剣に考えていました。既存のテクノロジーとの統合後は課題でしたが、今では機能をより速くスムーズにプッシュし、iOSとAndroidの両方のアプリバージョンを維持できます。

結論

オープンソースのReactNativeフレームワークは、クロスプラットフォームのモバイルアプリケーションを作成します。 JavaScriptはコアであり、インターフェースと機能を構築するためのコンポーネントも備えています。 これは、大規模なシームレスなエクスペリエンスを提供する人気のあるフレームワークです。

React Nativeは、ネイティブのようなアプリを作成できた10年前とは異なる方法でモバイルアプリを作成する簡単さと機会を企業に提供しますが、Javaのような1つのプログラミング言語を使用するだけで済みます。

最近では状況が異なり、企業はiOSプラットフォームとAndroidプラットフォームの両方で大幅な改善を行っていますが、そのような改善には資格のあるReactNative開発者の助けが必要です。

その他のコアテクノロジーの詳細については、以下のリンクを参照してください。

Node.JSアプリ開発
WordPress開発
SenchaExtJSアプリ開発