SolidJS是一个声明式、高效且灵活用于构建用户界面的 JavaScript 库。-BFW编程笔记

SolidJS是一个声明式、高效且灵活用于构建用户界面的 JavaScript 库。

Solid 号称拥有 JSX 语法，类似于 React hook 的语法，你可以用现代化的开发方式，获得性能最快的代码。

特点

直接使用浏览器的 DOM, 没有虚拟DOM， DOM diff 一整套算法，可以发现它编译出来的代码，他的 DOM ，是原生 DOM ，其他的语法是直接调用的，也没有那一整套复杂的虚拟 DOM。

提前编译，按需打包，无论是 react 还是 vue ，不管怎么编译，都需要引入框架本身。也就是 runtime 。而且这个体积还比较大。这些框架都采用的是用运行时方案，运行时方案相比于编译时方案，最大的优势是可以「几乎没有任何语法约束」的去完成代码编写。而 Solid 则预编译，将 jsx 部分的代码，转换成原生的语法。

响应式原理，精准更新对应的值，如果了解 React 的原理，就会知道，只要是 props 或者 state 改变，React 组件就会重新渲染，而每一次判断是否会重新改变，值是否不一样，也是一整套算法…… 而 Solid 不一样，他另辟蹊径，每一个组件都是一个独立的线程，每个组件里的 createMemo 或 createEffect 里面去收集对应的依赖，在 set 改变值后，都会重新执行这些方法。看起来就像是实时更新了一样。

示例代码

<html>
  <body>
    <script type="module">
      import {
        createSignal,
        onCleanup,
      } from "https://cdn.skypack.dev/solid-js";
      import { render } from "https://cdn.skypack.dev/solid-js/web";
      import html from "https://cdn.skypack.dev/solid-js/html";

      const App = () => {
        const [count, setCount] = createSignal(0),
          timer = setInterval(() => setCount(count() + 1), 1000);
        onCleanup(() => clearInterval(timer));
        return html`<div>${count}</div>`;
        // or
        return h("div", {}, count);
      };
      render(App, document.body);
    </script>
  </body>
</html>

800_auto