Solid.js用于构建用户界面的 JavaScript 库

联合创作 · 2023-09-22 01:38

Solid.js 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它不使用虚拟 DOM。相反,它选择将其模板编译为真实的 DOM 节点,并将更新包装在细粒度的 React 中。

主要特点

  • 具有细粒度更新的真实 DOM。
  • 声明性数据
  • 快速
  • 小型
  • 支持并建立在 TypeScript 之上。
  • 支持现代功能,例如 JSX、Fragment、Context、Portals、Suspense、Streaming SSR、Progressive Hydration、Error Boundaries 和 Concurrent Rendering。
  • 适用于无服务器环境,包括 AWS Lambda 和 Cloudflare Workers。
  • Webcomponent 友好

Gist

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

const HelloMessage = props => <div>Hello {props.name}</div>;

render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"));

简单组件只是一个接受属性的函数。Solid 使用一个render函数来创建应用程序的反应式挂载点。

然后将 JSX 编译为高效的真实 DOM 表达式:

import  {  render ,  template ,  insert ,  createComponent  }  from  "solid-js/web" ; 

快速开始

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

> 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 提供支持的最小客户端渲染应用程序。

浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报