本質的な反応ネイティブのパフォーマンスのヒントとトリック

反応ネイティブアプリケーションのパフォーマンスを向上させるための実用的なガイド

キーポイント

• JavaScript（JS）スレッドとメインスレッドのアニメーション処理のバランスを取り、アプリケーションのパフォーマンスを向上させます。このバランスを管理するには、useNativeDriver属性とInteractionManagerを使用します。
• 不要なコンポーネントの再レンダリングは避けてください。ヒントには、コンポーネントと機能の記憶、useCallback賢明な使用、Redux状態を使用した地域の状態の更新を避け、インライン関数を回避します。
• 画像を最適化して、アプリケーション速度を向上させます。 SVGアイコンと画像、WebP画像形式（ロスレスのない画質）、および画像をキャッシュして、レンダリングをスピードアップします。
• 安定したNPMパッケージとフラットリストを使用してプロジェクトアレイをレンダリングし、タイマー/リスナー/サブスクライブをログアウトし、グローバル変数の不必要な使用を回避し、ループオブジェクトの参照を防ぐことにより、メモリリークを回避します。
パフォーマンス分析ツール、ChromeのDevtools、React Devtools、Flipper、React Native Performance Monitorsなどの分析ツールを使用して、パフォーマンスを排出および監視します。さらに、プロダクションモードでコンソールログを削除して、アプリケーションのパフォーマンスを強化します。
この記事では、開発者が最適なパフォーマンスを実現し、比類のないユーザーエクスペリエンスを提供するために、開発者がネイティブアプリケーションを最適化するのに役立つ包括的なヒントと戦略を提供します。

JSスレッドとメインスレッドのバランスをとるアニメーション

アニメーション

Animeはあらゆるアプリケーションで厳しいタスクであり、Reactネイティブも例外ではありません。 React Nativeは2つのメインスレッドを使用します。JSスレッドはJavaScriptコードを実行するために使用され、メインスレッドは主にユーザーインターフェイスのレンダリングとユーザー入力に応答する責任があります。通常、アニメーションはメインスレッドでデフォルトで実行されます。ただし、メインスレッドの重いアニメーションワークロードは、フレームドロップなどのパフォーマンスの問題を引き起こす可能性があります。

ソリューション1：usenativedriver

を使用してみてください

は、Reactネイティブアプリケーションで要素をアニメーション化するときに使用できるReactネイティブアニメーションプロパティです。ユーザーがこのプロパティの値を

に設定すると、Reactネイティブアプリケーションはメインスレッドでアニメーションをレンダリングします。ただし、メインスレッドが他のタスクでビジーであると予想される場合は、useNativeDriverを設定してアニメーションをJSスレッドに転送できます。 true useNativeDriver: false

ソリューション2：InteractionManager 場合によっては、JSスレッドとメインスレッドの両方が非常に忙しいでしょう。たとえば、アプリケーションは、APIデータの取得、いくつかのロジックの実行、およびUIでレンダリングする場合があります。この場合、JSスレッドはデータの取得とロジックの実行に忙しく、メインスレッドはUIを表示するのに忙しいです。アニメーションを実行しようとすると、両方のスレッドが占有されている場合、フレームドロップとパフォーマンスの問題を引き起こす可能性があります。この場合、InteractionManagerを使用できます。最初にアニメーションを開始します。アニメーションが完了した後、ReactネイティブはInteractionManager.runAfterInteractionsに電話してJSコードを実行します。 JSコードはAPIを呼び出し、UIにデータを表示します。この方法は、JSコードとアニメーションを同時に実行するJSスレッドの過負荷を回避するのに役立ちます。

不要な再レンダリングを避けてください

反応ネイティブで不必要な再レンダリングを回避することは、最適なパフォーマンスを維持するために重要です。アプリケーションが再レンダーを再融解するたびに、JSスレッドはJSバンドルファイルを作成し、Reactネイティブブリッジに渡してから、メインスレッドに渡します。アプリケーションが再レンダーが多いほど、JSスレッドとメインスレッドの間でより多くのパスが発生し、アプリケーションのパフォーマンスが低下します。

ソリューション1：メモリコンポーネント

React.memoは、不必要な再レンダリングを防ぐことにより、機能コンポーネントを最適化するためにReactによって提供される高次コンポーネントです。関数コンポーネントをReact.memoでラッピングすると、Reactはコンポーネントを覚えています。つまり、コンポーネントの小道具が変更された場合にのみコンポーネントが再レンダリングされます。レンダリング間の小道具が同じままである場合、Reactは以前のレンダリングの結果を再利用し、コンポーネントの再レンダリングのコストを回避します。

ソリューション2：usecallback関数を賢く使用します

親コンポーネントが子コンポーネントのコールバック関数を設定すると、親コンポーネントが再レンダーを再レンダーするたびにコールバック関数も再作成され、新しい関数参照が返されます。したがって、子コンポーネントはそれをコールバック関数値の変化として扱い、React.memoを使用しても再レンダリングします。これを緩和するには、useCallbackを使用して、親コンポーネントの各再レンダーで関数参照を再現するのを防ぐことができます。

ソリューション3：Reduxステータスでローカルステータスの更新を避けてみてください

ソリューション4：関数の結果を暗記しますソリューション5：インライン関数を避けます

最適化された画像

画像を最適化すると、アプリケーションのパフォーマンスが向上する可能性があります。

ソリューション1：SVGアイコンと画像を使用します

ソリューション2：Webp画像を使用して、ロスレスの画質を取得します

ソリューション3：画像をキャッシュしてレンダリングを高速化します

安定したNPMパッケージを使用してください

styleSheetsをコンポーネントフラットリストを使用してパフォーマンスを向上させます

メモリリークを避けてください

ソリューション1：タイマー/リスナー/サブスクライブをログアウト

ソリューション2：グローバル変数の不必要な使用を避けます

ソリューション3：オブジェクト参照のリサイクル

ネイティブのデバッグとパフォーマンス監視ツールを反応します

1パフォーマンス分析ツール

2

3

4

5

コンソールログを削除

ソリューション1：_dev_global変数を使用します

Babel-Plugin-Transform-Remove-Console

を使用します

結論

とにかく、Reactネイティブアプリケーションのパフォーマンスを最適化することは、シームレスなユーザーエクスペリエンスに不可欠です。アニメーションのバランスをとり、レンダーの最小化、画像の最適化、安定したNPMパッケージの使用により、開発者はアプリケーションの速度と応答性を向上させることができます。さらに、効率的なデバッグツールを活用し、不必要なコンソールログを削除すると、パフォーマンスがさらに向上する可能性があります。これらの最適化手法に優先順位を付けることで、今日の競争力のあるアプリケーション市場で最適なパフォーマンスと優れたユーザー満足度が保証されます。

以上が本質的な反応ネイティブのパフォーマンスのヒントとトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。