smalljs$mol検索⌘ Kドキュメントプレイグラウンド比較エコシステム概要JA
状態とリアクティビティGetting StartedはじめにメンタルモデルはじめかたTypeScript から view.tree へプロジェクト構成ツールEssentialsインストールビュー状態とリアクティビティルーティングレンダリングテストデプロイトラブルシューティングDataデータ取得データスキーマGiper BazaMoreショーケースReact、Vue、Svelte からクックブックAdvancedプラグインモジュールのメタデータオフラインゴーストビューAboutよくある質問チームリリースAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

状態とリアクティビティ

$mol の状態は表計算のように動作します。値がどのように計算されるかを宣言すれば、それに依存するものはすべて自動的に更新されます。ストアも、ディスパッチも、エフェクトフックもありません——依存グラフが何を再計算すべきかを追跡します。

リアクティブなプロパティ

@ $mol_mem で装飾されたメソッドは、キャッシュされたリアクティブなセルです。一度実行して結果を記憶し、読み取った何かが変化したときだけ再計算します。1namespace $.$$ {2 export class $my_counter extends $.$my_counter {3 @ $mol_mem count() { return 0 }4 5 @ $mol_mem doubled() {6 return this.count() * 27 }8 }9}doubledcount を読み取るので、自動的に count を購読します。count を変更すると、doubled を表示するすべてのビューが更新されます——手作業で購読するものは何もありません。

読み取りと書き込み

プロパティはゲッターであると同時にセッターでもあります。引数なしで呼べば読み取り、引数を付けて呼べば書き込みです。1@ $mol_action2increment() {3 this.count( this.count() + 1 )4}

アクションと計算

この一つの区別が、リアクティブなコードを予測可能に保ちます。@ $mol_mem純粋な計算です——他のセルを読み取り、値を返すだけです。@ $mol_actionエフェクトです——状態への書き込み、ネットワーク呼び出し、タイマーはここに属します。@ $mol_mem の内部からセルへ書き込むとフィードバックループが生じます(書き込みが依存を無効化し、再計算され、また書き込む)。$mol はこれを循環購読として報告します。修正は常に同じです。副作用はアクションに置き、計算は純粋に保ちます。@ $mol_mem でできることできないことボタンのハンドラーは基底クラスで @ $mol_mem として生成されます。安全に書き込めるよう @ $mol_action でオーバーライドしてください。1@ $mol_action2submit() {3 this.saved( true )4}

派生状態は合成できる

依存が自動的に追跡されるため、派生値は配線なしで連鎖します。それぞれが一つ前を読み取り、根での変更は必要な範囲だけ正確に波及します。1@ $mol_mem full_name() {2 return `${ this.first() } ${ this.last() }`.trim()3}4 5@ $mol_mem greeting() {6 return this.full_name() ? `Hello, ${ this.full_name() }!` : 'Hello!'7}
GitHub でこのページを編集役に立ちましたか?はいいいえ前へビュー次へルーティング
このページの内容リアクティブなプロパティ読み取りと書き込みアクションと計算派生状態は合成できるキー付き状態非同期は単なる値イベント間の一時的な状態次へ
Type to search the documentation.