SolidJS 细粒度响应式 UI 框架技术调研

SolidJS 是由 Ryan Carniato 创建的开源前端 UI 框架，以细粒度响应式（Fine-Grained Reactivity）和无虚拟 DOM 为核心特色。它通过 Signals 精确追踪每个状态变更到 DOM 的更新路径，直接操作真实 DOM，无需 VDOM diff。SolidJS 在性能基准测试中长期位居前列，核心运行时仅约 7KB（gzip），是构建高性能、低延迟交互 UI 的理想选择。2026 年，Solid 2.0 进入 Beta 阶段，带来一等异步、并发过渡和重构的 Suspense 系统，标志着 Solid 从"性能标杆"向"现代全栈响应式平台"演进。

一、 基本信息

二、 版本历史与 2026 年现状

2026 年核心趋势

1. Solid 2.0 即将发布：一等异步、并发过渡、重构 Suspense 是最大的亮点。
2. Signals 生态扩张：Angular、Preact、Vue 等框架纷纷引入 Signals，Solid 的原创设计理念得到行业认可。
3. SolidStart 2.0 同步推进：元框架与核心库同步升级，提供更完整的全栈能力。
4. 性能标杆地位稳固：SolidJS 在 js-framework-benchmark 中长期位居前列。
5. 企业采用增加：高性能仪表盘、实时数据展示、复杂交互场景开始采用 Solid。
6. 十周年里程碑：2025 年 SolidJS 迎来十周年，社区影响力持续扩大。

三、 技术定位与简介

SolidJS 的定位是高性能、细粒度响应式 UI 框架。与 React 的"组件重渲染"模型不同，SolidJS 强调：

• 细粒度响应式：每个状态、每个派生、每个 effect 都精确追踪依赖。
• 无虚拟 DOM：状态变更直接映射到精确的 DOM 操作，没有 diff 开销。
• 真正的响应式：状态是响应式的值而非快照，避免 React 中常见的闭包陷阱和过期状态问题。
• 编译器优化：JSX 编译为高效的 DOM 操作代码，运行时开销极小。
• 同步渲染：默认同步渲染，无 Suspense 水合延迟。

SolidJS 的核心设计哲学认为：响应式系统不仅仅是性能优化手段，更是构建正确性更好的 UI 的方式。它的 Signals 模型已被整个行业广泛借鉴（React use()、Angular Signals、Vue Vapor Mode 等）。

四、 快速上手安装说明

1. 使用 SolidStart 创建全栈项目

npx degit solidjs/templates/ts my-solid-app
 
cd my-solid-app
npm install
npm run dev

2. 标准项目结构（SolidStart 2.0）

my-solid-app/
├── src/
│   ├── app.tsx                 # 应用根组件
│   ├── components/             # 可复用组件
│   ├── routes/                 # 文件系统路由
│   │   ├── index.tsx           # /
│   │   ├── about.tsx           # /about
│   │   └── user/
│   │       └── [id].tsx        # /user/:id
│   ├── lib/                    # 工具函数和共享状态
│   └── entry-client.tsx        # 客户端入口
│   └── entry-server.tsx        # 服务端入口
├── public/                     # 静态资源
├── app.config.ts               # SolidStart 配置
├── vite.config.ts              # Vite 配置
├── package.json
└── tsconfig.json

3. 核心开发命令

npm run dev       # 启动开发服务器
npm run build     # 生产构建
npm run start     # 生产启动
npm run test      # 运行测试

4. app.config.ts 配置示例

// app.config.ts
import { defineConfig } from '@solidjs/start/config'
 
export default defineConfig({
  ssr: true,
  vite: {
    // Vite 插件配置
  }
})

5. 第一个 SolidJS 组件

// src/components/Counter.tsx
import { createSignal } from 'solid-js'
 
export function Counter() {
  const [count, setCount] = createSignal(0)
  const double = () => count() * 2
 
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Count: {count()} (Double: {double()})
    </button>
  )
}

五、 核心特性

1. 细粒度响应式（Signals）

SolidJS 的核心是 Signals 系统：

• createSignal()：创建响应式状态。
• createMemo()：创建派生计算值，自动追踪依赖。
• createEffect()：创建副作用，依赖变化时执行。
• createResource()：处理异步数据。

import { createSignal, createMemo, createEffect } from 'solid-js'
 
const [count, setCount] = createSignal(0)
const double = createMemo(() => count() * 2)
 
createEffect(() => {
  console.log(`Count: ${count()}, Double: ${double()}`)
})

2. 无虚拟 DOM

SolidJS 不使用 VDOM。JSX 模板在编译时被转换为精确的 DOM 操作指令。当状态变化时，只有依赖该状态的 DOM 节点会被更新。

3. 真正的响应式

SolidJS 的状态是响应式的值而非快照。调用 count() 会订阅当前 effect/memo，状态更新时自动触发相关依赖。这避免了 React 中常见的闭包陷阱和过期状态问题。

4. 编译器优化

SolidJS 的 JSX 编译器将组件模板转换为高效的 imperative DOM 代码，消除不必要的运行时开销。核心运行时仅约 7KB（gzip）。

5. 同步渲染

SolidJS 默认同步渲染，组件函数只执行一次，后续更新通过响应式系统直接更新 DOM。这与 React 的"函数重新执行"模型截然不同。

6. SSR 与 SolidStart

SolidJS 提供内置 SSR 支持。SolidStart 是基于 Vite + Nitro 的官方全栈框架，支持：

• 文件系统路由。
• SSR / SSG / CSR。
• API 路由。
• 多平台适配器（Vercel、Netlify、Cloudflare、Node）。

7. Stores 状态管理

SolidJS 提供 solid-js/store 用于深度响应式状态管理：

import { createStore } from 'solid-js/store'
 
const [state, setState] = createStore({
  user: { name: 'Alice', age: 30 },
  todos: []
})
 
setState('user', 'age', 31) // 精确更新嵌套属性

8. 生命周期控制

SolidJS 组件函数只执行一次，生命周期通过响应式系统控制：

• onMount()：挂载时执行。
• onCleanup()：清理时执行。
• createEffect()：响应式副作用。

六、 适用场景

1. 黄金适用场景

• 高性能 Web 应用：仪表盘、实时数据展示、复杂交互表格。
• 复杂交互 UI：大量状态更新和 DOM 操作的应用。
• 实时应用：聊天应用、协作工具、实时数据流展示。
• 嵌入式 Widget：体积极小，适合嵌入第三方页面。
• 游戏/创意编程：低延迟的 DOM 更新适合互动式体验。
• 微前端组件：框架无关，可作为独立微前端单元。

2. 局限适用场景

• 大型企业级系统：Angular 的 DI 和模块规范在大型企业中更具优势。
• 生态依赖项目：如果需要大量第三方库，React 生态更丰富。
• 简单静态内容站：Astro 在纯静态内容站点上更轻量和简单。

七、 技术亮点

1. 细粒度响应式系统

SolidJS 的 Signals 精确追踪每个状态到 DOM 的依赖关系。组件函数只执行一次，后续更新直接更新 DOM，没有组件重渲染开销。

2. 性能基准标杆

SolidJS 在 js-framework-benchmark 中长期位居前列，在创建行、更新行、选择行、交换行等关键指标中表现出色。

3. 真正的响应式语义

SolidJS 的响应式语义避免了 React 中的闭包陷阱。调用 count() 总是获取最新值，无需担心过期闭包。

4. 极简运行时

核心运行时仅约 7KB（gzip），远小于 React/Vue/Angular。这使其在嵌入式和低带宽场景中极具优势。

5. Solid 2.0 架构升级

Solid 2.0 带来一等异步、并发过渡、可变派生、重构 Suspense 等能力，使 Solid 从高性能 UI 库向现代全栈响应式平台演进。

6. 对行业的深远影响

SolidJS 的细粒度响应式理念已被整个行业采纳。React 的 use() hook、Angular 的 Signals、Vue 的 Vapor Mode 都受到 Solid 的启发。

八、 核心概念与架构

1. Signals 与响应式图

SolidJS 在运行时维护一个响应式图（Reactive Graph）：

• Signal 是数据源。
• Memo 是派生节点。
• Effect 是副作用节点。
• 当 Signal 更新时，只有依赖它的 Memo 和 Effect 会被通知。

digraph Solid_Signals {
  rankdir=TB
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  Signal [label="createSignal(state)", fillcolor="#bae6fd"]
  Memo [label="createMemo(derived)", fillcolor="#bae6fd"]
  Effect [label="createEffect(side effect)", fillcolor="#bae6fd"]
  DOM [label="DOM Update"]
 
  Signal -> Memo
  Signal -> Effect
  Memo -> Effect
  Effect -> DOM
}

2. 组件函数只执行一次

与 React 不同，SolidJS 组件函数只执行一次。JSX 模板被编译为响应式 DOM 模板，后续更新不重新执行组件函数。

function Counter() {
  const [count, setCount] = createSignal(0)
  console.log('This runs only once!') // 只打印一次
 
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count()}
    </button>
  )
}

3. 控制流组件

SolidJS 提供细粒度控制流组件，避免不必要的 DOM 重建：

import { Show, For, Switch, Match } from 'solid-js/web'
 
<Show when={user()} fallback={<p>Loading...</p>}>
  <p>Hello, {user().name}</p>
</Show>
 
<For each={todos()}>
  {(todo) => <li>{todo.text}</li>}
</For>

4. 异步数据与资源

createResource 将异步数据集成到响应式系统：

import { createResource } from 'solid-js'
 
const fetchUser = async (id) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}
 
const [user] = createResource(userId, fetchUser)

5. SolidStart 数据流

SolidStart 提供类似 React Router 的 loader/action 数据流：

• route.load：路由级数据加载。
• route.action：处理表单提交和数据变更。
• 数据通过响应式系统传递到组件。

九、 技术局限与边界

1. 生态规模较小： 虽然 SolidJS 生态在增长，但 UI 组件库、企业级解决方案的数量仍少于 React 和 Vue。

2. 学习曲线独特： SolidJS 的"组件函数只执行一次"心智与 React/Vue 截然不同，需要适应 Signals 和细粒度响应式思维。

3. 跨框架复用需要包装： SolidJS 组件不是标准 Web Components，在 React/Vue/Angular 中复用需要自定义包装。

4. 大型应用的架构约定： SolidJS 本身不像 Angular 那样提供强模块规范，超大型项目需要自行建立架构约定。

5. Solid 2.0 尚未稳定： 截至 2026 年，Solid 2.0 仍处于 Beta，生产环境建议使用 Solid 1.x 稳定版。

6. 企业级支持有限： 相比 Angular 的 Google 支持或 React 的 Meta 支持，SolidJS 更依赖社区和个人贡献。

十、 生态地图

SolidJS 生态围绕 SolidStart、Vite 和响应式工具构建：

digraph Solid_Ecosystem {
  rankdir=TB
  node [shape=box, style="rounded,filled", fillcolor="#f0fdf4"]
  Solid [label="SolidJS Core", fillcolor="#bbf7d0"]
 
  Solid -> SolidStart [label="SolidStart"]
  Solid -> Vite [label="Vite"]
  Solid -> Store [label="solid-js/store"]
  Solid -> Router [label="@solidjs/router"]
  Solid -> Query [label="TanStack Query"]
  Solid -> Primitives [label="Solid Primitives"]
  Solid -> UI [label="UI Libraries"]
 
  UI -> Kobalte [label="kobalte"]
  UI -> Corvu [label="corvu"]
 
  SolidStart -> Nitro [label="Nitro"]
  SolidStart -> API [label="API Routes"]
  SolidStart -> SSR [label="SSR/SSG"]
}

十一、 生态集成

十二、 开发与工程化

1. TypeScript 严格模式

SolidJS 完全基于 TypeScript，建议开启严格模式：

{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

2. SolidStart 路由约定

• src/routes/index.tsx：首页。
• src/routes/about.tsx：关于页。
• src/routes/user/[id].tsx：动态路由。
• src/routes/api/users.ts：API 路由。

3. 状态管理策略

• 简单组件状态：createSignal()。
• 复杂共享状态：solid-js/store 或 Runes 风格封装。
• 服务端状态：createResource() 或 TanStack Query。

4. 代码组织规范

src/
├── components/       # 可复用组件
├── routes/           # 文件系统路由
├── lib/              # 工具函数、共享状态
├── stores/           # 全局状态（可选）
├── app.tsx           # 应用根组件
├── entry-client.tsx  # 客户端入口
└── entry-server.tsx  # 服务端入口

5. 测试策略

• 单元测试：Vitest + Solid Testing Library。
• E2E 测试：Playwright。
• 性能测试：js-framework-benchmark 或 Lighthouse。

十三、 性能与安全

1. 细粒度更新减少 DOM 操作

SolidJS 只更新依赖变化的精确 DOM 节点，避免整组件或整树重渲染。这是其性能优势的根本原因。

2. 避免在 Signal 中创建新对象

在 Signal getter 中返回新对象会破坏 memo 优化：

// 不推荐：每次返回新对象
const data = createMemo(() => ({ count: count() }))
 
// 推荐：仅返回变化的部分
const data = createMemo(() => count())

3. 使用 createMemo 缓存派生值

避免在 JSX 中重复计算复杂表达式，使用 createMemo 缓存：

const total = createMemo(() => items().reduce((sum, item) => sum + item.price, 0))

4. 安全：XSS 与模板注入

SolidJS 模板默认对插值进行转义，防御 XSS。但需注意：

• 避免使用 innerHTML 渲染未过滤的用户输入。
• 对动态 URL 进行协议校验。

5. 安全：SolidStart API 路由校验

所有 SolidStart API 路由和 actions 必须执行输入校验和鉴权：

import { action, redirect } from '@solidjs/router'
import { z } from 'zod'
 
const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})
 
export const loginAction = action(async (formData: FormData) => {
  const data = loginSchema.parse(Object.fromEntries(formData))
  const session = await authenticate(data)
  if (!session) return new Error('Invalid credentials')
  throw redirect('/dashboard')
})

6. 环境变量管理

SolidStart 使用 VITE_ 前缀暴露环境变量给客户端，服务端变量不要加此前缀。

十四、 技术对比

十五、 最佳实践

1. 将响应式逻辑集中在 Signals： 使用 createSignal、createMemo、createEffect 构建清晰的响应式图，避免在组件中混用非响应式状态。

2. 组件函数只执行一次的心智： 不要在 SolidJS 组件函数中假设会重新执行。初始化逻辑放在组件函数中，更新逻辑交给 Signals。

3. 使用 createMemo 缓存昂贵计算： 复杂派生值用 createMemo，避免每次渲染重复计算。

4. 优先使用 For 和 Show 控制流： 这些控制流组件是细粒度的，只更新变化的部分，比条件渲染 JSX 更高效。

5. 共享状态使用 solid-js/store： 对于复杂嵌套状态，使用 createStore 实现深度响应式，避免手动 spread。

6. 异步数据使用 createResource： 将异步数据集成到响应式系统，自动处理 loading、error 和 value 状态。

7. API 路由和 actions 必须校验输入： 使用 Zod 校验所有服务端输入参数，防止注入和恶意请求。

8. 避免在 Signal getter 中创建新对象： 返回稳定引用，确保 memo 和 effect 优化生效。

9. 使用 SolidStart 的全栈能力： 不要只在客户端 fetch 数据。利用 SolidStart 的 route load 和 actions 实现全栈数据流。

10. 生产环境使用 Solid 1.x 稳定版： Solid 2.0 Beta 仍在演进，生产项目等待 stable 发布后再升级。

十六、 学习与社区资源

1. 官方核心资源

• SolidJS 官方文档：https://docs.solidjs.com/ — 完整的 API 参考和教程。
• Solid Playground：https://playground.solidjs.com/ — 在线 REPL。
• SolidStart 文档：https://start.solidjs.com/
• Solid GitHub：https://github.com/solidjs/solid

2. 视频与教程

• Ryan Carniato YouTube：SolidJS 创始人，深度解析响应式原理和 Solid 2.0。
• Ryan Carniato 博客：深入技术文章和架构思考。
• SolidJS 官方教程：从 Signals 到 SolidStart 的完整学习路径。

3. 社区与讨论

• Reddit r/solidjs：社区讨论和经验分享。
• Solid Discord：官方 Discord 社区。
• Twitter/X @solidjs：官方动态。

4. 推荐书籍

• 《The Solid Story》— 社区编写的 SolidJS 开发指南。
• 《SolidJS: Reactive JavaScript》— 系统学习 Signals 和响应式架构。