跳到主要内容

响应式原语

Solid 的基础能力，核心就在几组 primitives 上。理解这些之后，整个框架会突然变得非常直白。

createSignal​

最基础的状态单元。

import { createSignal } from 'solid-js'

const [count, setCount] = createSignal(0)

count 不是值本身，而是 getter。读取时要写 count()。

这件事刚开始会有点别扭，但它也让依赖收集变得非常明确：哪个表达式读取了 count()，哪个表达式就会在它变化时更新。

createMemo​

派生值。

const doubled = createMemo(() => count() * 2)

适合：

  • 计算属性
  • 昂贵派生逻辑
  • 需要缓存的组合结果

createEffect​

副作用。

createEffect(() => {
  console.log(count())
})

它会自动追踪内部读取的信号。和 React 的 useEffect 最大的区别是，不需要手写依赖数组。

createResource​

异步数据处理是 Solid 很值得补的一块。

const [user] = createResource(userId, fetchUser)

适合：

  • 接口请求
  • 依赖参数切换的数据加载
  • 和 Suspense 配合使用

createStore​

当状态开始变成对象树，createStore 会更顺手。

import { createStore } from 'solid-js/store'

const [form, setForm] = createStore({
  name: '',
  email: '',
})

它比单纯堆很多 createSignal 更适合表单、复杂筛选、嵌套结构。

batch​

一次合并多次更新，减少不必要的连锁反应。

batch(() => {
  setCount((v) => v + 1)
  setName('solid')
})

untrack​

临时读取某个值，但不让当前计算把它记成依赖。

这在避免“顺手读了一下，结果多出订阅关系”时很有用。

实际使用时怎么抓主线​

最常见的组合通常是：

  • createSignal：源状态
  • createMemo：派生状态
  • createEffect：副作用
  • createResource：异步数据
  • createStore：对象型状态

把这层想清楚，Solid 的大部分业务代码就已经有骨架了。