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

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

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情


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

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

闲话少说,冲了~

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

🤔What

什么是 SolidJS?

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

image.png

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

答:是的。

🧐Why

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

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

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

image.png

为什么它这么快?

答:主要因为 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

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

答:www.solidjs.com/docs/latest

image.png

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

🙄When

SolidJS 什么时候诞生的?

答:SolidJS 框架由 Ryan Carniato 创建,于 2018 年开源。

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

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

image.png

😄Who

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

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

image.png

😁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 啊

虽然长得像 React,但它的思路和 React 是完全不一样的。

推荐阅读知乎的一个高赞回答:

image.png


推荐阅读:

# SolidJS硬气的说:我比React还react

# 比React还Vue3的框架SolidJS,为什么性能可以Number 1?

# 前端框架solidjs怎么样?

OK,以上便是本篇分享。点赞关注评论,为好文助力👍

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

分类:
前端
收藏成功!
已添加到「」, 点击更改