SolidJS

网站• API 文档•功能教程• Playground • Discord

Solid 是一个用于创建用户界面的声明性 JavaScript 库。它没有使用虚拟 DOM，而是将其模板编译为真实的 DOM 节点，并使用细粒度的反应更新它们。声明你的状态并在整个应用程序中使用它，当一个状态发生变化时，只有依赖它的代码会重新运行。查看我们的介绍视频或继续阅读！

主要特征

• 对真实 DOM 的细粒度更新
• 声明性数据：将您的状态建模为具有反应原语的系统
• 一次渲染的心理模型：你的组件是常规的 JavaScript 函数，运行一次来设置你的视图
• 自动依赖跟踪：访问你的反应状态订阅它
• 小而快
• 简单：学习一些可以重用、组合和构建的强大概念
• 提供现代框架功能，如 JSX、片段、上下文、门户、悬念、流式 SSR、渐进式水合、错误边界和并发渲染。
• 自然可调试：A <div>是一个真正的 div，因此您可以使用浏览器的 devtools 来检查渲染
• Web 组件友好并且可以编写自定义元素
• 同构：在客户端和服务器上渲染你的组件
• 通用：编写自定义渲染器以在任何地方使用 Solid
• 一个不断发展的社区和生态系统，拥有积极的核心团队支持

您可以通过在终端中运行以下命令来开始使用简单的应用程序：

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

或者对于 TypeScript：

> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

这将创建一个由Vite支持的最小的、客户端渲染的应用程序。

或者您可以在自己的设置中安装依赖项。要将 Solid 与 JSX（ 推荐 ）一起使用，请运行：

> npm i -D babel-preset-solid
> npm i solid-js

最简单的设置方法是添加 babel-preset-solid到 .babelrcwebpack 的 babel 配置或汇总配置：

"presets": ["solid"]

要使 TypeScript 正常工作，请记住将您的设置 .tsconfig为处理 Solid 的 JSX：

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

为什么是Solid？

高性能

为提高性能而精心设计，经过 5 年的研究，Solid 的性能与优化的原生 JavaScript 几乎没有区别（请参阅 Solid on the JS Framework Benchmark）。Solid体积小，完全可摇树，在服务器上渲染时也很快。无论您是在编写完全客户端呈现的 SPA 还是服务器呈现的应用程序，您的用户都能比以往更快地看到它。（从库的创建者那里了解更多关于 Solid 性能的信息。）

强大的

Solid 功能齐全，具备现代框架所能提供的一切功能。上下文和存储内置了高性能状态管理：您不必使用第三方库来管理全局状态（如果您不想这样做）。借助 Resources，您可以像使用任何其他状态一样使用从服务器加载的数据，并通过 Suspense 和并发渲染为其构建响应式 UI。当您准备好迁移到服务器时，Solid 拥有完整的 SSR 和无服务器支持，以及流式传输和渐进式水合作用，可以尽快实现交互。（查看我们的完整互动功能演练。）

务实

事半功倍：使用简单、可组合的原语，没有隐藏的规则和陷阱。在 Solid 中，组件只是函数——渲染完全取决于你的状态是如何使用的——所以你可以随意组织你的代码，而不必学习新的渲染系统。Solid 鼓励诸如声明式代码和读写隔离之类的模式，这些模式有助于保持您的项目可维护性，但还不够固执地妨碍您。

富有成效的

Solid 建立在 JSX 和 TypeScript 等成熟工具之上，并与 Vite 生态系统集成。Solid 的裸机、最小抽象让您可以直接访问 DOM，从而轻松使用您喜欢的原生 JavaScript 库，如 D3。Solid 生态系统正在快速发展，具有自定义原语、组件库和构建时实用程序，可让您以新的方式编写 Solid 代码。

更多的

查看我们的官方文档或浏览一些示例