MobXのサブスクリプションの仕組みを解説する記事を読んだメモ
概要
- MobX には
Observable state、Computed values、Reactions、Actionsという 4 つの主要な概念がある - これらの概念が連携してアプリケーションの状態を更新し、UI をリアクティブにレンダリングする
- リアクティブとは状態の変化が発生したときに、それに依存する計算やUIの更新などを自動的に行うことを意味している
- MobXは状態変化にリアクティブに対応する主な方法として、サブスクリプションを使用することが示唆されている
- サブスクリプションを使用すると、状態の変化を監視し、変化が発生したときに適切な処理を実行することができる
サブスクリプションの仕組み
- 状態の変化の通知
- 依存関係ツリーの更新
- 古い通知を受け取った派生値は、自身が依存するすべてのオブザーバブルな値が「準備完了」状態になるまで待機する
- すべての依存関係が更新されると、派生値は再計算を開始する
- 同期的な実行:
- MobXはすべての処理を同期的に実行する
- これにより、古い派生値が観察されることを防ぎ、状態の一貫性を保証する
- トランザクション
伝播の効率化
MobXは、実行時依存関係分析を使用して、オブザーバ（例えばReactコンポーネント）とオブザーバブル（データ）の関係を最小限かつ一貫性のあるセットに自動的に決定する
これにより、実際に再計算が必要な派生値のみが更新され、不要な再計算が回避される
また、リアクション（副作用を実行する派生値）に関与していない派生値は、遅延評価されるので、必要になるまで計算は実行されず、計算結果もキャッシュされない
これにより、計算コストを最小限に抑えることができる
実行時依存関係分析とは
実行時依存関係分析とは、プログラムの実行中に、どの値が他の値に依存しているかを動的に追跡するプロセス
MobXでは、この実行時依存関係分析を用いて、オブザーバとオブザーバブルな状態の関係を最小限かつ一貫性のあるセットに自動的に決定する
実行時依存関係分析の仕組み
MobXは、コードの実行中に、どのオブザーバブルな値がアクセスされたかを追跡することで依存関係を把握する
具体的には、以下の手順で行われる
- 派生値（computed value）やリアクション（reaction）の実行
- 派生値やリアクションは、オブザーバブルな状態に依存して値を計算したり、副作用を実行したりする関数
- これらの関数が実行されると、MobXは内部的に導出スタックと呼ばれるスタックにその関数をプッシュする
- オブザーバブルな値へのアクセス
- 依存関係リストの作成
- 関数の実行が完了すると、MobXはアクセスされたオブザーバブルな値のリスト、すなわち依存関係リストを作成する
- 依存関係の更新
- 依存関係リストは、関数の実行ごとに更新される
- 新しい依存関係が追加された場合は、オブザーバブルな値の変化を監視するように設定される
- 逆に、依存関係から削除された場合は、監視が解除される
