持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前言

前端框架三分天下依然存在，但是其它优秀的框架也在活跃，比如SolidJS。SolidJS是一个构建用户界面的库，简单高效且卓越。如果你使用过react，这个也许会给带来另外一种体验。SolidJS同样使用jsx进行开发，在性能上，根据官方给出的性能图，直逼原生js。

特点

由于没有采用虚拟DOM或者其它对比，在性能上没有额外的开销
站在react等优秀的框架之上，如果学习过，对于本套框架的学习有事半功倍的效果
体积很小且支持ts

简单使用

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

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

render(() => <Counter />, document.getElementById("app")!);

这是官方提供了一小段代码，很简单。从solid-js/web库里面导入render函数，此函数作用于将函数会的代码渲染到节点上。从solid-js导入createSignal导入响应式函数createSignal。在页面上添加一个按钮，调用increment函数，调用setCount函数从而让count()(这里是一个getter函数)响应式变化。从写法上来看，和react及其相似，所以会减轻开发者的负担。我们在看一下编译出来的语法：

import { render, createComponent, delegateEvents, insert, template } from 'solid-js/web';
import { createSignal } from 'solid-js';

const _tmpl$ = /*#__PURE__*/template(`<button type="button"></button>`, 2);

function Counter() {
  const [count, setCount] = createSignal(0);

  const increment = () => setCount(count() + 1);

  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

    _el$.$$click = increment;

    insert(_el$, count);

    return _el$;
  })();
}

render(() => createComponent(Counter, {}), document.getElementById("app"));

delegateEvents(["click"]);

看到编译出来的代码，在_templ$ 变量里面保存的是完整的原生dom，而其它的语法也是直接从其它库里面调用的。相比于其它的框架，都是采用运行时编译，虽然方便了我们在开发时没有约束，但是整体的包体积也会变得更大，会将整个框架的代码都打包进去。SolidJs而使用预编译，将 jsx 部分的代码，转换成原生的语法，所以在性能上直逼原生JS。

SolidJs的第一天

前言

特点

简单使用