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

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 进行更新，也只有那个表达式会被重新评估。编译器会优化初始渲染以及运行时更新。