这些前端新技术你很难再忽视了 —— SolidJS

新系列《这些前端新技术你很难再忽视了》，包括：SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势，很有必要了解。

咱们将采用 5W1H 分析法，即 What（何事）、Why（何因）、Where（何地）、When（何时）、何人（Who）、How（何法）6 个维度来解析这些“新玩意儿”。

闲话少说，冲了~

• 点赞收藏关注，今晚一夜暴富 👍👍👍

🤔What

什么是 SolidJS？

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

我敲，用于构建界面的 JS 库，这个我们熟啊，比如三大框架都是呀，React、Vue、Angular，是和它们一样的库么？

答：是的。

🧐Why

那都有 3 大框架了，还有必要再造一个这样轮子吗、它有什么不一样的？或者它诞生的背景是什么？

答：SolidJS 最大的特点就是“性能直逼原生JS”。

空口无凭，捉襟见肘。有理有据，百口莫辩。数据统计：​​js-framework-benchmark​​

为什么它这么快？

答：主要因为 3 点：

1. 没有用虚拟 DOM（无 diff 算法）：它编译出来的 DOM ，就是原生 DOM ，其它语法是直接调用的，也没有那一整套复杂的虚拟 DOM。
2. 提前编译，按需打包：无论是 react 还是 vue，这些框架采用的是运行时才编译方案，而 Solid 是预编译，将 jsx 部分的代码，转换成原生的语法。并且，react 和 vue使用，都需要引入整个框架本身。而 Solid 可以按需引入，比方说像 lodash、Rxjs 那样，用个某个功能，按需引入对应的组件即可。
3. 响应式实现，细粒度更新：如果了解 React 的原理，就会知道，只要是 props 或者 state 改变，React 组件就会重新渲染，而每一次判断是否会重新改变，值是否不一样，也是一整套算法……而 Solid 不一样，他另辟蹊径，每一个组件都是一个独立的线程，每个组件里的 createMemo 或 createEffect 里面去收集对应的依赖， 在 set 改变值后，都会重新执行这些方法。看起来就像是实时更新了一样。

🤫Where

官方文档地址？还是看文档更准确。

答：​​https://www.solidjs.com/docs/latest​​

左边是文档解释、右边是在线运行的代码，学起来真方便！！

🙄When

SolidJS 什么时候诞生的？

答：SolidJS 框架由 Ryan Carniato 创建，于 2018 年开源。

而 Angular 诞生于 2009 年、React 诞生于 2013 年 3 月 、Vue 诞生于 2014 年 2 月。

SolidJS 妥妥的“够新！！” GitHub star history，这曲线！！逆天了！！

😄Who

Ryan Carniato 是个什么级别的人物？

答：他自称是前端 JS 性能追求者、响应式编程的超级粉丝，是 Marko 核心团队成员、 SolidJS UI 库的作者。

😁How

怎么使用？

答：Solid 和 React Hook 代码风格、语法极其相似.

举个例子🌰

import { render } from "solid-js/web";
import { createSignal, createEffect, createMemo, mapArray } from "solid-js";

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

  createEffect((prev) => {
    const sum = a() + b();
    if (sum !== prev) console.log(sum);
    return sum;
  }, 0);

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

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

风格好像 React 啊