$mol
検索
⌘ K
ドキュメント
プレイグラウンド
比較
エコシステム
概要
JA
状態とリアクティビティ
Getting Started
はじめに
メンタルモデル
はじめかた
TypeScript から view.tree へ
プロジェクト構成
ツール
Essentials
インストール
ビュー
状態とリアクティビティ
ルーティング
レンダリング
テスト
デプロイ
トラブルシューティング
Data
データ取得
データスキーマ
Giper Baza
More
ショーケース
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
で装飾されたメソッドは、キャッシュされたリアクティブなセルです。一度実行して結果を記憶し、読み取った何かが変化したときだけ再計算します。
1
namespace
$
.
$$
{
2
export class
$my_counter
extends
$
.
$my_counter
{
3
@ $mol_mem
count
(
)
{
return
0
}
4
5
@ $mol_mem
doubled
(
)
{
6
return
this
.count
(
)
*
2
7
}
8
}
9
}
doubled
は
count
を読み取るので、自動的に
count
を購読します。
count
を変更すると、
doubled
を表示するすべてのビューが更新されます——手作業で購読するものは何もありません。
読み取りと書き込み
プロパティはゲッターであると同時にセッターでもあります。引数なしで呼べば読み取り、引数を付けて呼べば書き込みです。
1
@ $mol_action
2
increment
(
)
{
3
this
.count
(
this
.count
(
)
+
1
)
4
}
アクションと計算
この一つの区別が、リアクティブなコードを予測可能に保ちます。
@ $mol_mem
は
純粋な計算
です——他のセルを読み取り、値を返すだけです。
@ $mol_action
は
エフェクト
です——状態への書き込み、ネットワーク呼び出し、タイマーはここに属します。
@ $mol_mem
の内部からセルへ書き込むとフィードバックループが生じます(書き込みが依存を無効化し、再計算され、また書き込む)。$mol はこれを
循環購読
として報告します。修正は常に同じです。副作用はアクションに置き、計算は純粋に保ちます。
@ $mol_mem
でできること
できないこと
ボタンのハンドラーは基底クラスで
@ $mol_mem
として生成されます。安全に書き込めるよう
@ $mol_action
でオーバーライドしてください。
1
@ $mol_action
2
submit
(
)
{
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.