跳到主要内容

控制流与组件模式

Solid 的模板控制流和 React 很不一样。它不是单纯靠 JavaScript 条件渲染拼出来的，而是提供了一批专门的控制流组件。

Show​

条件渲染。

<Show when={user()} fallback={<span>加载中</span>}>
  <UserCard user={user()!} />
</Show>

适合把“有值 / 没值”“已登录 / 未登录”这类结构写得更干净。

For​

列表渲染。

<For each={todos()}>{(todo) => <TodoItem todo={todo} />}</For>

Index​

当列表顺序稳定、只关心项内容变化时，Index 会更合适。

这类差别在大列表、高频更新场景里更值得在意。

Switch 和 Match​

多分支渲染。

<Switch>
  <Match when={status() === 'loading'}>加载中</Match>
  <Match when={status() === 'error'}>出错了</Match>
  <Match when={status() === 'done'}>完成</Match>
</Switch>

Suspense​

和 createResource 一起用时非常自然。

<Suspense fallback={<span>加载中</span>}>
  <Profile />
</Suspense>

ErrorBoundary​

适合把局部失败隔开，而不是让整页一起崩掉。

这套控制流的价值​

一开始看会觉得“为什么不用普通 if 和 map”。写到复杂页面时就会发现，这些组件让依赖关系和更新粒度都更稳定，也更符合 Solid 的运行模型。