クロスプラットフォーム実装
このドキュメントは、現在展開中の新しいアーキテクチャに関するものです。
React Nativeレンダラーは、プラットフォーム間で共有されるコアレンダー実装を利用しています
React Nativeの以前のレンダーシステムでは、Reactシャドウツリー、レイアウトロジック、そしてビューフラット化アルゴリズムがプラットフォームごとに実装されていました。現在のレンダラーは、コアとなるC++実装を共有することで、クロスプラットフォームのソリューションとなるように設計されています。
React Nativeチームは、レンダーシステムにアニメーションシステムを組み込み、さらにReact NativeのレンダーシステムをWindowsや、ゲーム機、テレビなどのOSといった新しいプラットフォームへ拡張する予定です。
コアレンダーシステムにC++を活用することで、いくつかの利点がもたらされます。単一の実装は開発とメンテナンスのコストを削減します。AndroidにおいてYogaとレンダラーを統合するオーバーヘッドが最小限に抑えられるため（つまり、YogaのためのJNIが不要になる）、Reactシャドウツリーの作成とレイアウト計算のパフォーマンスが向上します。最後に、各Reactシャドウノードのメモリフットプリントは、KotlinやSwiftから割り当てる場合よりもC++の方が小さくなります。
チームはまた、共有されているが保護されていないリソースへの同時アクセスに関連する問題がないことを保証するために、不変性 (immutability) を強制するC++の機能を活用しています。
Androidでのレンダラーのユースケースでは、主に2つの場面でJNIのコストが依然として発生することを認識することが重要です。
- 複雑なビュー（例：
Text、TextInputなど）のレイアウト計算には、JNIを介してpropsを送信する必要があります。 - マウントフェーズでは、JNIを介してミューテーション操作を送信する必要があります。
チームは、JNIのオーバーヘッドを削減するために、ReadableMapをByteBufferを使用してデータをシリアライズする新しいメカニズムに置き換えることを検討しています。私たちの目標は、JNIのオーバーヘッドを35〜50%削減することです。
レンダラーは、C++ APIの2つの側面を提供します。
- (i) Reactと通信するため
- (ii) ホストプラットフォームと通信するため
(i) について、Reactはレンダラーと通信してReactツリーをレンダーし、イベント（例：onLayout、onKeyPress、タッチなど）を「リッスン」します。
(ii) について、React Nativeレンダラーはホストプラットフォームと通信して画面にホストビューをマウントし（ホストビューの作成、挿入、更新、削除）、ホストプラットフォーム上でユーザーによって生成されたイベントをリッスンします。
