编程

SolidJS 框架简介——简单、高效的响应式 JavaScript 框架

2256 2022-01-06 09:42:10

Solid 是一个声明式 JavaScript 库,用于创建用户界面。它不使用虚拟 DOM,而是使用真实 DOM 节点编译模板,使用细粒度响应进行数据更新。因此,当你更新状态时,只会运行相关的依赖代码。

主要特性

  • 真实 DOM 细粒度更新(不使用虚拟 DOM!没有脏值检查的开销)。
  • 声明式数据
    • 简单可组合的原语(原子操作语法),没有隐藏规则。
    • 函数式组件,无需生命周期方法或者指定配置对象。
    • 渲染一次的心智模型
  • 高效!
    • 与优化过的 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 进行更新,也只有那个表达式会被重新评估。编译器会优化初始渲染以及运行时更新。