React Native はバージョン 0.76 のリリースを発表しました。この更新により、新しいアーキテクチャがデフォルトで有効になるようになりました。バージョン 0.76 より前は、新しいアーキテクチャを有効にする唯一の方法はオプトインすることでした。
このブログでは、新しいアーキテクチャの新機能に焦点を当てます。
新しい React Native アーキテクチャは 1 年以上にわたって見出しを飾ってきましたが、それには正当な理由があります。この新しいアーキテクチャは、「ブリッジレス」としても知られています。なぜブリッジレスと呼ばれるのですか？これについてはブログで検討します。」
新しいアーキテクチャについて説明する前に、以前のアーキテクチャを簡単にまとめてみましょう。
a. JavaScript と Native の 2 つのランドがあります。
b.スレッドが 3 つあります:
c. JavaScript とネイティブ コードが相互に通信できる唯一の方法は、ブリッジを介することです。
d.ボタンやアラートなどのネイティブ コンポーネントは、JavaScript レイヤーで JSON にシリアル化され、ブリッジを介してネイティブ スレッドに送信されます。ネイティブ スレッドでは、この JSON がネイティブ (iOS または Android) コンポーネントに変換されます。
え。ネイティブ スレッドでは、ネイティブ コンポーネントでイベントが発生すると、イベントを JSON としてブリッジ経由で JavaScript スレッドに送信します。この通信は非同期であるため、ブリッジは JavaScript とネイティブ コンポーネント間の対話を容易にします。
JavaScript 層とネイティブ層の間の通信はブリッジに依存します。これが古いアーキテクチャの主な制限です。
パフォーマンスの問題
ぎくしゃくしたフレームまたは空のフレーム
ノードの重複
新しいアーキテクチャは、以前のアーキテクチャの課題を解決することに重点を置いています。その目標は次のとおりです:
高速起動 ?
同時レンダリング ?️
レスポンシブ アプリ ??
複数のプラットフォームでのサポート?
クラッシュが少なくなりますか?
メモリ管理の改善?
同期実行 ?
新しいアーキテクチャは C で書き直されたもので、次の 2 つの大きな改善が可能になりました。
A. JavaScript とネイティブ層間のブリッジなしの直接通信。このため、新しいアーキテクチャは一般に「ブリッジレス」として知られています。
B.複数のプラットフォームのサポート (プラットフォームが React Native を使用している限り)
1. JavaScript インターフェース (JSI)
JSI は JavaScript インターフェイスであり、C で書かれたレイヤーです。これにより、任意の JS エンジンを使用でき、IOS、Android だけでなく、スマート TV、スマート ウォッチなどのクロスプラットフォームのサポートが可能になります。
JSI を使用すると、JavaScript がネイティブ モジュールへの参照を保持できるようになります。これらにより、JavaScript がネイティブ モジュールと直接通信できるようになり、JavaScript とネイティブ スレッド間の同期通信も可能になります
追記: React ネイティブ コードは Metro 経由でバンドルされ、JSI に送られます。
2.新しいネイティブ モジュール
新しいネイティブ モジュールは、新しく改良されたネイティブ モジュールです。これは C で書かれており、JS/TS API から Native への同期アクセスを可能にします。これは、ブリッジを必要とせずにネイティブと JavaScript スレッドの間で直接通信が行われることを意味します。 C では、クロスプラットフォーム共有用に独自のネイティブ モジュールを作成することもできます。
新しいネイティブ モジュールにより、イベントの処理、レイアウトの読み取り、非同期と同期の両方の更新のスケジュール設定が可能になります。
前に学習したように、JSI は TurboModules 内のオブジェクトの参照を保持します。これにより、JavaScript コードは 必要な場合にのみ各モジュールをロードできます (モジュールの動的ロード)。これにより、古いアーキテクチャと比較してアプリの起動時間が短縮されます。
3.コードジェン
Codegen は、厳密に型指定されたコントラクトを作成するツールです。これらのコントラクトは、開発者の時間を節約し、クロスプログラミング言語間のコミュニケーションを容易にすることで開発者にとって役立ちます。
React Native では、JavaScript と Typescript は厳密に型指定された言語ではありませんが、C は厳密に型指定されます。 JavaScript と C の間で通信を行うために、 codegen はインターフェイス (型) を生成します。これは、実行時の高速実行のためにビルド時に発生しました。
Codegen JSI (JavaScript インターフェイス) はブリッジなしで Turbo モジュールと直接通信するためです。
4.新しいレンダラー
新しいレンダラーはファブリックとして知られています。これも C で書かれています。
React Native には 3 つのスレッドがあることを覚えていますか? - JavaScript、メイン/UI ネイティブ、およびシャドウ/バックグラウンド スレッド。古いアーキテクチャでは、メインスレッドがブロックされることが問題であり、これにより次のような問題が発生しました。
パフォーマンスの問題
空のフレーム (60FPS が欠落しています)
また、古いアーキテクチャではノードと DOM の 2 つのコピーを維持する必要があります。これはメモリの問題につながります
緊急の更新を優先するために優先度の低いタスクを中断する方法はありませんでした。
ファブリックでは、これらの問題が解決されました。新しいレンダラーを使用すると、トランジションを使用して優先度の低い緊急タスクを中断できるようになりました。 これにより、アプリの応答性が向上し、メイン/UI ネイティブ スレッドのブロックが解除されなくなります。イベントは非同期で実行されます。 新しいレンダラー システムでは、ビュー階層の不変のツリーが存在します。
不変とは、変更できないことを意味します。不変の利点:
これにより、スレッドセーフな更新処理が可能になります。
これは、複数の進行中のツリーが存在し、それぞれが異なるバージョンのユーザー インターフェースを表すことも意味します。
異なるバージョンの UI には複数のツリーがあるため、*更新は UI をブロックすることなくバックグラウンドでレンダリングできます。 *(遷移中など) またはメインスレッド (応答として)ユーザー入力へ)
新しいレンダラーは、異なるスレッド間で レイアウト情報を同期的に読み取ることもできます。これにより、必要に応じて、優先度の低い更新と同期読み取りのバックグラウンド計算が可能になります。
新しいアーキテクチャはデフォルトで 0.76 から利用可能です
新しいアーキテクチャが導入されました: JavaScript インターフェイス (JSI)、新しいネイティブ モジュール (ターボ モジュール)、codegen、新しいレンダラーシステム(生地)
JSI は JavaScript インターフェイスです これは C に基づいており、ブリッジを必要とせずに JavaScript とネイティブ モジュールの直接通信を可能にします
新しいネイティブ モジュール は、現在のネイティブ モジュールを改良したものです。 C で書かれており、JavaScript との間の同期通信、ブリッジなしのネイティブ、遅延読み込みなど、多くの利点を実現します。
Codegen は、JavaScript と C が相互に通信するための型インターフェイスを生成します。
新しいレンダラー (ファブリック) は、 C で書かれた新しいレンダラー システムです。これにより、マルチスレッドが有効になり、優先度の低いタスクが中断されるため、パフォーマンスが向上します。
新しいイベント ループ により、反応ネイティブを DOM に近づけます
GitHub の問題をよく読みました
楽しく学習しましょう!!
以上がReact Native の新しいアーキテクチャの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
