React Native はバージョン 0.76 のリリースを発表しました。この更新により、新しいアーキテクチャがデフォルトで有効になるようになりました。バージョン 0.76 より前は、新しいアーキテクチャを有効にする唯一の方法はオプトインすることでした。
このブログでは、新しいアーキテクチャの新機能に焦点を当てます。
新しい React Native アーキテクチャは 1 年以上にわたって見出しを飾ってきましたが、それには正当な理由があります。この新しいアーキテクチャは、「ブリッジレス」としても知られています。なぜブリッジレスと呼ばれるのですか？これについてはブログで検討します。」
新しいアーキテクチャについて説明する前に、以前のアーキテクチャを簡単にまとめてみましょう。
?古いアーキテクチャの要約
a. JavaScript と Native の 2 つのランドがあります。
b.スレッドが 3 つあります:
- JavaScript スレッド (JavaScript): JavaScript バンドル コードを担当します。
- メイン、UI ネイティブ スレッド : ネイティブ モジュールを担当します。
- シャドウ、または背景スレッド (ヨガ): レイアウトを担当します。
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 サイトの他の関連記事を参照してください。
JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AMJavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。
CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AMCおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AMJavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AMPythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AMCとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
メモ帳++7.3.1
使いやすく無料のコードエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
