Solid 是一个用于构建用户界面的声明式 JavaScript 库

Solid 是一个用于构建用户界面的声明式 JavaScript 库。与使用虚拟 DOM 不同，它将模板编译为真实 DOM 节点，并通过细粒度的响应式更新来精确地修改界面。本教程将带你从零开始，完成 Solid 项目的创建、开发到构建部署的全过程。

一、核心特性与项目创建

1.1 关键特性速览

细粒度更新：直接操作真实 DOM，仅更新变化的部分，性能接近原生 JavaScript。
声明式数据：使用响应式基础类型（如 createSignal）来建模状态。
一次渲染心智模型：组件函数只执行一次来建立视图，后续更新由响应式系统驱动。
自动依赖追踪：读取响应式状态即自动订阅，状态变化时精确更新依赖代码。
现代框架特性：支持 JSX、Fragment、Context、Portals、Suspense、流式 SSR、渐进式水合等。
生态友好：兼容 Vite、TypeScript，并支持 Web Component。

1.2 创建新项目 (推荐)

官方提供了基于 Vite 的模板，可以快速创建一个最小化的客户端渲染应用。

JavaScript 模板

npx degit solidjs/templates/js my-app
cd my-app
npm i          # 或使用 yarn / pnpm
npm run dev    # 启动开发服务器

TypeScript 模板

npx degit solidjs/templates/ts my-app
cd my-app
npm i          # 或使用 yarn / pnpm
npm run dev    # 启动开发服务器

执行后，在浏览器中打开提示的本地地址（如 http://localhost:3000），即可看到 Solid 应用。

二、在现有项目中集成 Solid

如果你想在已有的项目中引入 Solid，可以通过 npm 安装依赖并配置构建工具。

2.1 安装核心与 Babel 预设

1 2	npm i solid-js npm i -D babel-preset-solid

2.2 配置 Babel

在项目的 .babelrc 或 babel 配置文件中添加预设：

1
2
3

{
  "presets": ["solid"]
}

对于 Webpack、Rollup 或 Vite，对应配置可参考官方文档。

2.3 配置 TypeScript

如果使用 TypeScript，需在 tsconfig.json 中配置 JSX 以支持 Solid：

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

三、基础示例与代码解析

下面的代码展示了 Solid 的核心工作方式。

import { createSignal } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  // 创建响应式状态：count 是访问器，setCount 是设置器
  const [count, setCount] = createSignal(0);
  // 创建派生状态：使用函数包装表达式
  const doubleCount = () => count() * 2;

  // 组件函数体会执行一次，用于建立视图
  console.log("组件函数体只执行一次...");

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        点击增加: {doubleCount()}
      </button>
    </>
  );
}

// 将组件挂载到页面的 #app 元素上
render(Counter, document.getElementById("app")!);

运行逻辑：

createSignal(0) 创建初始值为 0 的响应式数据。
点击按钮时，setCount 更新值。
只有依赖于 count 的 doubleCount() 表达式会重新计算并更新对应的 DOM 文本，按钮本身不会重新渲染。

四、构建与部署

4.1 开发与构建命令

基于 Vite 模板的项目，常用命令如下：

命令	作用
`npm run dev`	启动开发服务器，支持热模块替换。
`npm run build`	构建生产环境代码，输出到 `dist` 目录。
`npm run serve` / `npm run preview`	本地预览构建后的生产版本。

4.2 部署到生产环境

构建完成后，dist/ 目录下的静态文件（index.html、JS、CSS 等）可以部署到任何静态托管服务。

部署选项示例：

Vercel / Netlify：连接你的 Git 仓库，设置构建命令为 npm run build，输出目录为 dist，平台会自动部署。
GitHub Pages：将 dist 目录推送到 gh-pages 分支，或使用 GitHub Actions 自动化部署。
Nginx / Apache：将 dist 目录下的所有文件复制到 Web 服务器的根目录下。
CDN：你可以将构建文件上传到对象存储（如 AWS S3）并启用静态托管。

4.3 服务端渲染（SSR）

Solid 支持服务端渲染，用于实现更快的首屏加载和 SEO 优化。如果需要 SSR，可以参考官方文档使用 solid-js/dom 或 solid-js/web 中的 renderToString 和 hydrate 等 API。

五、常见问题与技巧

为什么我的组件不更新？
- 确保你使用的是响应式状态（如 createSignal）并在 JSX 中正确访问了其值（count()，而非 count）。
- 检查是否正确使用了 onClick 等事件绑定。
如何管理全局状态？
- Solid 内置了 Context 和 Store (createStore)，足以处理全局状态，无需第三方库。
浏览器支持情况如何？
- Solid 核心支持 过去 2 年发布的所有现代浏览器，包括 Firefox、Safari、Chrome 和 Edge。不支持 IE 浏览器。
为什么我的 console.log 只打印了一次？
- 这正是 Solid 的“函数体只执行一次”特性，旨在建立静态视图结构，后续变化由细粒度的响应式更新处理。这是设计使然，无需担忧。