SolidJS 框架简介——简单、高效的响应式 JavaScript 框架
Solid 是一个声明式JavaScript库,用于创建用户界面。它不使用虚拟DOM,而是使用真实DOM节点编译模板,使用细粒度响应进行数据更新。因此,当你更新状态时,只会运行相关的依赖代码。
主要特性
- 真实DOM 细粒度更新(不使用虚拟DOM!没有脏值检查的开销)。
- 声明式数据
- 简单可组合的原语(原子操作语法),没有隐藏规则。
- 函数式组件,无需生命周期方法或者指定配置对象。
- Render once mental model.
- 高效!
- 与优化过的vanilla DOM 代码几乎一样的性能表现。
- 在 Isomorphic UI Benchmarks 性能测试中,服务端渲染最快
- 体积小! Solid 编译器只引入你使用到的库
- 支持TypeScript
- 支持现代特性如JSX, Fragments, Context, Portals, Suspense, 流式渲染(Streaming SSR), 渐进式注水(Progressive Hydration), 错误边界(Error Boundaries)和并发渲染Concurrent Rendering.
- 可在无服务环境中工作,包括AWS Lambda 和 Cloudflare Workers。
- 对 Webcomponent 友好,可编写自定义元素
- Context API 涵盖自定义元素
- 使用ShadowDOM 重定位进行隐式事件委托
- Shadow DOM 接口
- 透明化调试:<div> 就只是 div.
摘要
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";
const _tmpl$ = template(`<div>Hello </div>`);
const HelloMessage = props => {
const _el$ = _tmpl$.cloneNode(true);
insert(_el$, () => props.name);
return _el$;
};
render(
() => createComponent(HelloMessage, { name: "Taylor" }),
document.getElementById("hello-example")
);
这里的 _el$ 是真实的DIV元素和属性名props.name,如此例中的Taylor, 会被追加到它的子节点中。请注意这里的 props.name 被包裹在函数中。这是因为它是这个组件中唯一会被再次执行的部分。即使从外部对name进行更新,也只有那个表达式会被重新评估。编译器会优化初始渲染以及运行时更新。