SolidJS

SolidJS 导读：写给 React 开发者的对照指南

本册主调是"对比驱动"：SolidJS 是一个用细粒度响应式直通更新 DOM 的前端框架，组件只执行一次，没有虚拟 DOM 对账环节。本册每章都以它与 React（必要时加上 Vue）的同题对照推进——同样的需求，两套写法，两条运行路径，两种性能账单。读完你会同时弄懂两个框架，而不只是一个。

别以为 JSX 长得像 React，写法就能照搬。Solid 与 React 对"状态如何变成界面"给出了截然不同的答案：前者的组件函数执行完毕便不再重跑，更新由细粒度的信号订阅直通 DOM；后者靠组件反复执行生成虚拟 DOM，再经 diff 对账修正真实节点。理解这条分界线，就拿到了通读全册的钥匙。

为什么用"对照"来学 SolidJS

绝大多数 SolidJS 资料默认读者从零开始，从 createSignal 的语法定义讲起。但现实是：2021 年之后学前端框架的人，脑子里几乎都装着一套 React 心智模型——useState、useEffect、依赖数组、重渲染、key 的作用。这套模型在 Solid 里不是"没用"，而是"处处碍事"：它会诱导你解构 props、写出不该出现的 useMemo、对 createEffect 的触发时机做出错误预期。

对照式学习正好切中这一点。每个概念都先问一句"React 里对应的那个东西是什么"，再指出相似处停在表层、差异从哪里开始。比如 Signal 和 useState 都叫"状态"，但 Signal 是订阅制的——读它的地方会自动登记依赖，写它的时候只有登记过的订阅者被通知；而 useState 的 setter 触发的是整个组件函数重跑。一字之差，性能模型天差地别。

这也让 Vue 成了天然的参照物。Vue 的 ref 与 Solid 的 Signal 血缘相近（都源自 Knockout 一脉的细粒度响应式），但 Vue 用 Proxy 拦截属性访问来收集依赖，Solid 靠函数调用即读取的封装函数（getter）完成追踪；Vue 也要跑虚拟 DOM 做对账，Solid 把这一环整个删掉了。三者在第 10 章会有一张总对照表。

你将掌握什么

• 说清细粒度响应式与虚拟 DOM 的本质区别：更新为什么不再需要 diff，代价转移到了哪里。
• 用 createSignal、createEffect、createMemo、createStore 写出地道的 Solid 状态层，并知道它们各自对照 React 的哪个 API、差异在哪。
• 理解"组件只执行一次"带来的连锁变化：props 为什么不能解构、生命周期如何退化为装载与清理、自定义 Hook 如何改写为组合原语。
• 用 Show、For、Switch 等控制流组件替代 JSX 条件与列表 map，理解 keyed 更新策略的差别。
• 走通工程全链路：路由（Solid Router）、全栈方案（SolidStart）、测试、调试工具、部署，以及从 React 项目渐进迁移的决策路径。
• 读懂性能基准数字（js-framework-benchmark 的量级），知道 Solid 快在哪个环节、慢在哪个环节，而不是背一个"最快框架"的标签。

全册知识地图

图：SolidJS 全册知识地图——学习依赖与对照主线

地图从上到下是依赖关系：第 1 章建立心智模型，第 2 到 4 章是响应式内核（全书地基），第 5 章往右进入应用层设施，第 8 到 9 章是工程化收尾，第 10 章用总对比表和迁移策略收官。斜着看，每一格旁边都挂着对应的 React 概念——这是全册反复出现的对照锚点。

怎么读这本教程

熟 React 的读者按章节顺序读效率最高，因为对照体系是递进的：先建立"组件只执行一次"的世界观（第 1、3 章），再学状态原语（第 2 章），否则 createEffect 的自动依赖追踪会让你觉得"太魔法"。只熟 Vue 的读者可以把第 2 章里 Signal 与 ref 的辨析当作主线索，跳到第 4 章看"没有虚拟 DOM"意味着什么，再回头补组件模型。

动手派的读者可以走另一条路：直接从第 6 章的 SolidStart 脚手架起一个项目，遇到不懂的原语再回查第 2 章。每个章节内的代码示例都刻意保持可独立运行的最小形态，方便摘出来试验。

带团队做技术选型的读者，建议只读三块：第 8 章的基准数据解读、第 10 章的框架总对照表，以及第 10.4 节的迁移决策路径。这三块回答"该不该用、什么时候用、怎么迁"的问题，其余章节可以留给执行层。

阅读前提

需要掌握 JavaScript 的函数、闭包、解构与模块语法，理解 JSX 的基本写法（不必精通 React，但对"组件函数返回界面描述"这一点要有概念）。异步部分会用到 Promise 与 async/await。类型系统以 TypeScript 为主呈现示例，但类型标注都保持轻量，纯 JavaScript 读者可以直接忽略类型部分。

工具准备：本机的 Node.js（建议长期支持版本）与任一包管理器。第 6 章会用到 SolidStart 的脚手架命令，第 9 章会用到 Vitest 与浏览器调试插件。全册不依赖任何付费服务，所有示例在本地即可跑通。

金句收束：React 教你"把界面当成状态的函数"，Solid 更进一步——"把界面当成状态的电路"。状态一变，电流只流过接了线的那个灯泡。