要点

本篇是 SolidJS 及其配套生态的条目式速查，按用途分六组：响应式原语（solid-js）、控制流组件、组件与 props、状态库（solid-js/store）、路由与数据（@solidjs/router）、SolidStart 工程；文末有全量速查表，可只搜表定位条目。版本基线：solid-js 1.9.10、@solidjs/router 0.15.4、SolidStart 1.2.0（截至 2025-11-20 的稳定线），仅在此基线成立的特性单独标注。路由与数据的机制讲解不在本篇重复，见SolidStart 路由与数据；框架定位与响应式模型见开山篇SolidJS 入门。

响应式原语组（solid-js）

createSignal：取值函数是心智根基

import { createSignal } from "solid-js";

const [count, setCount] = createSignal(0);
setCount(count() + 1);        // 用当前值写
setCount(c => c + 1);         // 基于前值写，批量场景更稳

一句话语义：声明”这个值变了，读它的地方要更新”。坑在传递：JSX 里 {count()} 是读值并建立订阅；value={count()} 传的是快照，value={count} 传的是取值函数——想让子组件里的变化触发更新，读取必须发生在渲染表达式里。

createResource：什么时候用它而不是 query

const [data, { refetch, mutate }] = createResource(() =>
  fetch("/api/boards").then(r => r.json())
);
data.loading; data.error; refetch();   // 四件套：数据、加载态、错误、手动重取

一句话语义：把 Promise 变成带加载态的响应式资源。分工判断：单组件内部的一次性异步用 createResource；路由级、需要按 key 去重缓存的数据走 router 的 query（见路由组），后者才能在多组件间共享缓存并在 action 后自动刷新。

控制流组件组

For 还是 Index：看数组元素是什么

<For each={todos()}>{(todo) => <li>{todo.title}</li>}</For>
<Index each={cells()}>{(cell, i) => <td>{cell()}</td>}</Index>

一句话语义：For 按引用追踪，对象数组重排时直接移动现成节点；Index 按索引追踪，元素本身被替换时也只更新那一格。坑：For 渲染字符串/数字数组时没有引用可追，改动一个元素是整列表重建——原始值数组换 Index。

组件与 props 组

splitProps：解构 props 的正牌替代品

function Card(props) {
  const [local, rest] = splitProps(props, ["title"]);
  return <li {...rest}>{local.title}</li>;   // title 留下渲染，其余透传
}

一句话语义：把 props 拆成”本组件要用的”和”继续传下去的”，两边都保持响应性。坑：const { title, ...rest } = props 这种 React 习惯写法会同时弄死两边——title 变成快照，rest 丢掉 getter。

状态库组（solid-js/store）

createStore：路径更新是差量的来源

import { createStore, produce } from "solid-js/store";

const [state, setState] = createStore({ cards: [{ id: 1, title: "设计" }] });
setState("cards", 0, "title", "设计评审");                          // 精确到一个字段
setState("cards", produce(l => l.push({ id: 2, title: "开发" })));  // 数组操作

一句话语义：把嵌套状态变成可按路径订阅的对象树。坑：写成 setState(state => ({ cards: [...state.cards] })) 整体替换，差量更新优势就没了——要么路径更新，要么配 reconcile。

路由与数据组（@solidjs/router 0.15.x）

useSearchParams：筛选状态进 URL 的标准写法

const [params, setParams] = useSearchParams();
setParams({ page: 2 });              // 写进 URL，可分享可后退
<a href={"?page=" + (Number(params.page) || 1) + 1}>下一页</a>

一句话语义：把查询串变成双向绑定的响应式状态。坑：params.page 是字符串或 undefined，参与运算前先转数字；组件卸载不需要清它——状态本来就在 URL 里。

SolidStart 工程组

全量速查表

延伸阅读

文件路由与数据 API 的机制讲解见SolidStart 路由与数据；把这些条目组合成完整应用的过程见实战篇用 SolidJS 做一个看板小应用（2025-12-04 发布）；按阶段串起本系列与前置知识的路径见SolidJS 学习路线（2025-12-11 发布）。ESM 模块机制不熟的，先补站内Node.js 模块与 ESM；异步与 Promise 基础见Node.js 异步与 Promise。

版本核实（以官方文档为准）：截至本文（2025-11-20）稳定线为 solid-js 1.9.10、@solidjs/router 0.15.4、SolidStart 1.2.0（均为 npm 实查版本）；cache→query 更名发生于 router 0.15.0，cache 保留为弃用别名；action 成功后自动 revalidate 本页 query、API 路由方法名导出、APIEvent 结构、”use server” 指令均为官方文档描述；solid-js/store 与控制流组件为 1.x 长期稳定 API。安装命令不钉版本号，API 细节以 docs.solidjs.com 当前文档为准。