61

0

SolidJS

一个用于构建用户界面,简单高效、性能卓越的JavaScript库

SolidJS

构建状态 覆盖状态

NPM 版本 不和谐 Subreddit 订阅者

网站• 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 代码

更多的

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