リアクティブプログラミングと React Native の長所・短所

• React の重要な考え方は、状態が変わると UI が自動的に変わることだ。React はユーザーの状態変更に反応し、インターフェースを再構築する。典型的なリアクティブプログラミングであり、以下に原理をまとめる。

• 開発者は状態遷移（データ）に集中すればよい。状態が変わると、React が新しい状態に基づいて UI を再構築する。 状態変更の通知を受けた React は、現在の描画ツリーと新しい状態を組み合わせ、Diff アルゴリズムで変更部分を求める。その部分だけを DOM 操作で更新し、ツリー全体の再構築を避けて性能を高める。

React Native

• React Native は、ネイティブのモバイルアプリ向けに React から派生したものだ。主な違いは仮想 DOM の対応先にある。React はブラウザーの DOM ツリーに対応し、RN は JavaScriptCore を通してネイティブコントロールのツリーに対応する。

• JavaScriptCore は JavaScript インタープリターで、React Native では主に二つの役割を持つ。

  • JavaScript の実行環境を提供する。
  • JsBridge のように JavaScript とネイティブアプリ間の通信を仲介する。実際、iOS の多くの JsBridge は JavaScriptCore に基づいている。

• RN が仮想 DOM をネイティブコントロールに対応させる処理には二段階ある。

  • レイアウト情報の伝達：仮想 DOM のレイアウト情報をネイティブ側へ送る。
  • ネイティブ側がレイアウト情報に基づき、対応するコントロールでツリーを描画する。

まとめ

• JavaScript による開発とネイティブ描画の主な利点：

1. Web の技術スタックを使え、コミュニティが大きく、習得が速く、開発費用も比較的低い。
2. ネイティブ描画で、H5 より性能が大きく向上する。
3. 動的な変更に向き、ホットアップデートに対応する。

• 短所：

• 描画には JavaScript とネイティブ間の通信が必要で、ドラッグなどでは頻繁な通信によって動きが途切れることがある。
• JavaScript はスクリプト言語で、実行時に JIT（Just In Time）が必要になる。実行効率には AOT（Ahead Of Time）コードとの差が残る。
• 描画がネイティブコントロールに依存するため、プラットフォームごとの管理が必要で、OS 更新時にコミュニティのコントロールが遅れる場合もある。ネイティブ UI の制約も受ける。たとえば Android のジェスチャー競合の解消規則は固定されており、別々の人が書いたコントロールを入れ子にすると、競合が非常に厄介になる。