- React Native 0.76 が npm で公開された。このバージョンには新しいアーキテクチャがデフォルトで含まれており、最新の React 機能を完全にサポートする。
- 新しいアーキテクチャは Suspense、Transitions、自動バッチ処理、
useLayoutEffect などの機能をサポートし、新しいネイティブモジュールとコンポーネントシステムを導入することで、型安全なコードを書けるようになった。
- 2018年から React Native を根本的に書き直してきた成果であり、ほとんどのアプリが段階的に新しいアーキテクチャへ移行できるよう設計されている。
- React Native 0.76 は、ほとんどのアプリが従来のリリースと同程度の労力で導入でき、主要なライブラリはすでに新しいアーキテクチャをサポートしている。
新しいアーキテクチャとは？
- 新しいアーキテクチャは、React Native の主要システムを全面的に書き直したもので、コンポーネントのレンダリング、JavaScript とネイティブ抽象化の間の通信、スレッド間の作業スケジューリング方式を含む。
- 以前のアーキテクチャは非同期ブリッジを通じてネイティブプラットフォームと通信していたが、新しいアーキテクチャは同期・非同期の両方の更新をサポートするよう設計されている。
- 新しいアーキテクチャは、ネイティブモジュールシステム、新しいレンダラー、イベントループ、ブリッジの廃止という4つの主要要素で構成される。
新しいネイティブモジュール
- C++ で記述されており、次の新機能を提供する
- ネイティブランタイムとの同期通信が可能
- JavaScript とネイティブコード間の型安全性を提供
- プラットフォーム間でコード共有が可能
- デフォルトで lazy module loading を提供
- JavaScript/TypeScript API から C++ ネイティブ実装のすべての機能を利用可能
- Codegen により強力な型契約を定義可能
- モジュールは必要なときだけメモリにロードされるため、アプリ起動時間を短縮
新しいレンダラー
- C++ で再実装され、次の利点を提供する:
- 異なるスレッドで異なる優先度の更新をレンダリング可能
- 別スレッドで同期的にレイアウトを読み取り可能
- すべてのプラットフォームで共有される C++ コード
- ビュー階層は変更不可能なツリー構造として保存されるようになった
- スレッドセーフに更新を処理可能
- ユーザーインターフェースの異なるバージョンを表す複数の進行中ツリーを処理可能
- 低優先度の更新を中断し、ユーザー入力などの緊急な処理を先にレンダリングしてから、低優先度の更新を再開できる
イベントループ
- 新しいアーキテクチャは、明確なイベントループ処理モデルを実装し、React DOM と React Native の差を縮める。
- JavaScript スレッドで作業を処理する、明確に定義されたイベントループ処理モデルを実装
- イベントループは更新とイベントを予測可能な形で整列させるため、低優先度の更新を緊急のユーザーイベントによって中断できる。
- Web 標準との整合性が高まる
- 将来さらに多くのブラウザ機能の基盤となる見込み
ブリッジの廃止
- 新しいアーキテクチャではブリッジを廃止し、JavaScript とネイティブコードの間で直接かつ効率的な通信を可能にする。
- ブリッジの廃止により起動時間が改善し、未定義動作によるクラッシュが減少し、エラー報告やデバッグも容易になる。
新機能
- Transitions
- React 18 の新しい概念である Transitions は、緊急更新と非緊急更新を区別する。
- 緊急更新は即時の反応が必要で、Transitions による更新は UI をあるビューから別のビューへ切り替える。
- Automatic batching は、より多くの状態更新をまとめてバッチ処理し、中間状態のレンダリングを避けることで、React Native をより高速かつ低遅延で動作させる。
- 新しいアーキテクチャは
useLayoutEffect を通じてレイアウト情報を同期的に読み取り、同じフレーム内で UI を更新できるようサポートする。
- 新しいアーキテクチャは React 18 で導入された Suspense を完全にサポートし、ローディング状態を処理しつつ、ユーザー入力に高い優先度を与える。
アップグレード方法
- 0.76 へアップグレードする際、ほとんどのアプリはインターオペラビリティレイヤーのおかげで、他のリリースと同程度の労力で対応可能
- ただし New Architecture と concurrent 機能を完全に活用するには、カスタムネイティブモジュールとコンポーネントを移行する必要がある
- アプリ開発者の場合
- ライブラリ、カスタムネイティブコンポーネント、カスタムネイティブモジュールを New Architecture に完全対応するようアップグレードする必要がある
- 主要な React Native ライブラリの大半は New Architecture をサポートできるよう協力してきた
- ライブラリ管理者の場合は、新しいネイティブモジュールおよびコンポーネント API へのライブラリ移行が推奨される
GN⁺のまとめ
- New Architecture への移行は、React Native 開発における重要なマイルストーンになりそうだ。同期・非同期更新の両方が可能になり、ブリッジのボトルネックが解消され、別スレッドでレイアウトを読み取れるようになるなど、性能とユーザー体験の両面で多くの改善が期待できる
- 特に React 18 の Concurrent 機能を完全にサポートするようになった点も注目に値する。Suspense や Transition などを活用することで、より応答性が高く自然な UX を作れるようになるだろう
- ただし既存アプリやライブラリでは、New Architecture を完全にサポートするために移行作業が必要になりそうだ。段階的に進める必要はあるが、移行が完了すれば New Architecture の利点を十分に享受できるだろう
- このアーキテクチャは Meta の Facebook アプリと Instagram アプリですでに使用されており、Expensify、Kraken、BlueSky などの成功事例がある
- 全体として New Architecture は React Native の未来に向けた大きな前進だと思う。コミュニティの協力によってうまく定着することに期待したい
6件のコメント
React Nativeを初めて聞いたのもかなり昔のことのように感じます。Facebookで始まったにもかかわらず、まだ1.0になっていないというのは、むしろ驚きですね。
React Nativeを一度も使ったことがないので気になるのですが、感覚的にはAndroidに最適化されていそうなのに、実際にはiOSのほうがパフォーマンスが良いというのは興味深いですね。
こちらのクラッシュは、ほとんどがAndroidで発生しているようです。
Androidでは本当にひどいです……ひどいと言えるレベルです……
Hermesにエンジンを切り替えてからまだそれほど経っていない気がするのに、また大きく作り直したみたいですね
Hacker Newsの意見
4年間にわたりReact NativeアプリとバックエンドAPIを開発した経験があり、Expoへの移行で多くの問題は解決したものの、依然としてバグは存在する。iOSはAndroidより安定しており、パフォーマンスも優れている。React Nativeは学びやすく、大きなJSエコシステムを持っているため勧める価値はあるが、現在はFlutterを使っている
React Nativeについてはさまざまな意見があり、一部はExpoに不満を示してKotlin Multiplatformを勧めている。Hacker Newsの議論がますます無意味になっているという意見もある
Flutter開発者として、Swift UIとComposeのほうがモバイル開発により適していると考えており、新しいアプリを始めるならFlutterやReact Nativeは使わないつもりだ
React NativeはiOSでは悪くないが、Androidでは遅い。Hermesは興味深いが、依然として多くのポリフィルが必要だ。WebがReact Nativeに取って代わる日を期待している
Expo/RNを使ってBlueskyを開発中で、新アーキテクチャに関する初期テストではAndroidのパフォーマンスが向上した
ExpoとともにReact Nativeを使って良い経験をしており、個人開発者としてRNによって多くのことが可能になっている。新アーキテクチャに期待している
Flutterのレンダリング速度はReact Nativeより5倍速く、WebでReactを使うときのほうがさらに速い
CapacitorがNextJSのWebアプリ移植に有用だというツイートを見た
React Nativeは今年に入ってかなり良くなっており、react-strict-domの準備が整えば大きな変化をもたらすだろう