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