React NativeのNew Architectureドキュメントを読んでみる。

New Architecture概要

New Architectureのメインは主に2つ

Turbo Native Modules
Fabric Native Components

それに関連する他の登場人物

JSI
Codegen

Old Architecture(現状のアーキテクチャ)の課題

主にbridgeに関する課題。ざっくりまとめるとbrigeが遅いのが課題。

Jsonに一旦シリアライズするコストが高い
片方のレイヤーが送信してるとき、もう片方は待たないといけない

New Architectureによる改善(JSIなど)

現状のBridgeをやめてJSIを採用する。このJSIが肝！

JSIによってJavaScriptがC++のリファレンスを保持することが可能になる。例えばC++オブジェクトがJSオブジェクトを直接実行できるようになる。

このJSIによって、同期的な通信が可能になったり、bridgeのときのシリアライズの手間が省けたりする。
あとC++はiOS, androidだけでなく様々なプラットフォームで読めるので、将来的な拡張性も見据えているっぽい。

Takahiko Wada

Turbo Native Modules

New Architecture二本柱のうちの一つ。
Native Moduleの進化版みたいな感じ。

JS<-->Native間の通信にBridgeの代わりに、JSIを用いることで高速化している。

Takahiko Wada

Fabric Native Components

New Architecture二本柱のうちのもう一本。
現場のNative Componentの進化版みたいな感じ。

これもBridgeの代わりにJSIを使うことで高速化している。

そもそもNative Componentとは?

React Nativeでは、Reactで描いたUIが最終的に各OSのネイティブUIに変換して表示されているのが特徴。
例えばRNの< Text >は最終的に、iOSのUITextView、androidのTextViewに変換される。
こういうのをNative Componentと呼んでいる。
その中でもRN標準で用意されている<View>や<Text>はCore Componentと呼ばれている。
参考: https://reactnative.dev/docs/intro-react-native-components

Takahiko Wada

Codegen

残りの登場人物であるCodegen、これはNew Architectureのコードを書くときの”便利ツール"みたいなもの。

先述のTurbo Native ModulesやFabric Native Componentsをいざ作ろう、となったらiOS, androidのコードに加えてC++のコードも必要になる。
この辺のコードの雛形を出力してくれる便利ツールがCodegen。

Codegenの使用は必須ではないが、New Architectureのコードを書く際には便利。

Takahiko Wada

New Architectureの現状

現状(v0.72)時点で、明示的に指定しないとNew Architectureは有効にならない。

v0.72からNew Architectureアプリでも、旧ライブラリを読み込める仕組み Interop Layerが導入された。

実際のところ各ライブラリがNew Architectureに対応するのは相当大変で時間がかかるので、移行を促進する目的で用意された。
これによってNew Architectureを有効にしつつ、いままで通りに各種ライブラリを利用できるらしい。

全体的にプラットフォーム側も絶賛移行中という雰囲気。

Takahiko Wada

Expoは?

Expo 49の時点で、、

Expo GoはNew Architectureは非対応。

しかしDevleopment Buildは、オプションnewArchEnabled を指定することで有効にできる。

また、Expo開発者でネイティブモジュールを自作したい場合はExpo Moduleという仕組みがあるが、Expo ModuleではNew Architecture対応のモジュール(Turbo Native ModuleやFabric Component)を作ることとが可能。

さらにExpo Moduleを開発する際にはC++を書かなくてよいとのこと。React Native開発者はC++に不慣れな場合が多いので、って考えらしく、その通りでありがたそう。