跳到正文

响应式

组件在挂载时运行一次。在 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()。