リアクティビティ

コンポーネントはマウント時に一度だけ実行されます。JSX 内でシグナルを読むと、それに依存するテキストやプロパティだけが更新されます。

#リアクティブな状態

セットアップ中の読み取りはスナップショットです。値を最新のままにするときは、JSX 内でシグナルを呼び出します。

const [count, setCount] = createSignal(0);
<Text>Count: {count()}</Text>
<Button onClick={() => setCount(count() + 1)}>Increment</Button>

#派生状態

他のシグナルから計算する値には createMemo を使います。関数は純粋なままにし、書き込みはイベントや副作用から行います。

const doubled = createMemo(() => count() * 2);
<Text>{doubled()}</Text>

#副作用とクリーンアップ

ツリーの外での処理には createEffect を使います。ウィンドウが閉じたり枝が取り除かれたりしたときに購読が止まるよう、onCleanup を登録します。

import { createEffect, onCleanup } from "solid-js";

createEffect(() => count(), value => console.log(value));
const stop = watchProject();
onCleanup(stop);

#更新のバッチ処理

Solid は通常のシグナル書き込みをバッチ処理します。テストで、アサーションの前にキューに入った更新を確定させたいときは flush() を使います。