Solidjs 简介

已于 2022-02-10 16:03:30 修改
阅读量3.2k 收藏 5
点赞数 2
文章标签： javascript 前端 html
于 2022-02-10 16:01:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42287342/article/details/122856994
版权

Solid-js的定义

一个声明式、高效且灵活用于构建用户界面的 JavaScript 库（官方文档）

为什么选择Solidjs

  • 高性能 - 始终在公认的 UI 速度和内存利用率基准测试中名列前茅
  • 强大 - 可组合的反应式原语与 JSX 的灵活性相结合
  • 务实 - 合理且量身定制的 API 使开发变得有趣而简单
  • 生产力 - 人体工程学和熟悉程度使构建简单或复杂的东西变得轻而易举

优势

高性能 - 接近原生的性能，在 js-framework-benchmark 排名中名列前茅
极小的打包体积 - 编译为直接的DOM操作，无虚拟DOM，极小的运行时（类似于 Svelte），适合打为独立的 webComponent 在其它应用中嵌入
易于使用 - 近似 React 的使用体验，便于快速上手

快速开始

新建项目

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

示例

将HelloWorld渲染到app容器中

import { render } from 'solid-js/web';

function HelloWorld() {
  return <div>Hello World!</div>;
}

render(() => <HelloWorld />, document.getElementById('app'))

是不是看起来非常熟悉，和 React 一样

基本概念

jsx

jsx语法

Signal

Signal 是 Solid 中最基本的反应性单元，此函数类似于 React 的 useState，但返回函数用于获取调用它获取值，而不是像 React 一样直接取得值。使用createSignal创建

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

 使用方式

setCount(count() + 1)
setCount((c) => c + 1); // c代表前一个值

读取Signal

<div>Count: {count()}</div>;

Effect 

Signal 是可追踪的值，但它们只是等式的一半。另一半是观察者，也就是计算。最基本的计算称为 Effect，它产生副作用 —— 我们系统的输出。

可以通过从 solid-js 导入 createEffect 来创建 Effect。createEffect 接收一个函数，并监视其执行情况。createEffect 会自动订阅在执行期间读取的所有 Signal，并在这些 Signal 值之一发生变化时重新运行该函数。

createEffect(() => {
  console.log("The count is now", count());
});

Memo

 Memo 既是是跟踪计算，类似 Effect，又是只读 Signal。由于知道对应依赖关系及其观察者，Memo 可以确保他们只对任何更改运行一次。

看一个例子

生命周期

onMount

它只是一个 Effect 调用，但你可以放心使用它，一旦所有初始渲染完成，它只会在组件中运行一次

onMount(async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/photos?_limit=20`
  );
  setPhotos(await res.json());
});

onCleanup 

一些框架的清理方法直接是框架的副作用或生命周期方法的返回值。由于 Solid 渲染树中的所有内容都存在于（可能是惰性的）Effect 中并且可以嵌套，因此我们将 onCleanup 设为一级方法。您可以在任何范围内调用它，它会在该范围被触发以重新求值以及最终销毁时运行。

onCleanup(() => clearInterval(timer));

 流程控制

控制流大多可以用 JSX 实现相同功能，但是使用其则具有高于 JSX 的性能，Solid 可以对其进行更多优化
fallback 是在失败后的显示

Show

JSX 允许使用 JavaScript 来控制模板中的逻辑流。然而，如果没有虚拟 DOM，天真地使用诸如 Array.prototype.map 之类的东西会在每次更新时很浪费地重新创建所有 DOM 节点。相反，Reactive 库使用模板工具是很常见。在 Solid 中，我们将其封装在组件中

<Show
  when={loggedIn()}
  fallback={() => <button onClick={toggle}>Log in</button>}
>
  <button onClick={toggle}>Log out</button>
</Show>

fallback 属性充当 else，在传递给 when 的条件不为 true 时显示。

For

<For each={cats()}>
  {(cat, i) => (
    <li>
      <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
        {i() + 1}: {cat.name}
      </a>
    </li>
  )}
</For>

index 是一个 Signal，因此它可以在移动行时独立更新

Index

<Index each={cats()}>
  {(cat, i) => (
    <li>
      <a target="_blank" href={`https://www.youtube.com/watch?v=${cat().id}`}>
        {i + 1}: {cat().name}
      </a>
    </li>
  )}
</Index>

<Index> 与 <For> 具有相似的签名，除了数据项是 Signal 并且索引是固定的。

Switch

<Switch> 和 <Match> 组件类比 javaScript的Switch/case

<Switch fallback={<p>{x()} is between 5 and 10</p>}>
  <Match when={x() > 10}>
    <p>{x()} is greater than 10</p>
  </Match>
  <Match when={5 > x()}>
    <p>{x()} is less than 5</p>
  </Match>
</Switch>

Dynamic

<Dynamic> 可以让你将元素的字符串或组件函数传递给它，并使用提供的其余 props 来渲染组件

<Dynamic component={options[selected()]} />

除此之外，还有Portal、ErrorBoundary等组件，详情见官方文档

绑定

事件绑定

常规事件绑定

<div onMouseMove={handleMouseMove}>
  The mouse position is {pos().x} x {pos().y}
</div>

Solid 支持数组语法调用事件处理程序

const handler = (data, event /*...*/) => (
  <button onClick={[handler, data]}>Click Me</button>
);

on: 命名空间来匹配冒号后面的事件处理程序 

<button on:WierdEventName={() => /* Do something */} >Click Me</button>

 样式

先写一段css

/* main.module.css */
.container {
  width: 100px;
  height: 100px;
  background-color: green;
}
.text {
  font-size: 20px;
  color: red;
}

样式使用也与 React 非常类似，只是使用 class 而不是 className 

import style from "./main.module.css";

export default function Container() {
  return (
    <div class={style.container}>
      <span class={style.text}>text</span>
    </div>
  )
}

Solid 中的 style 属性接受样式字符串或对象。然而，对象形式不同于 Element.prototype.style，Solid 通过调用 style.setProperty 的封装来进行样式设置。这意味着键需要采用破折号的形式，如 background-color 而不是 backgroundColor。

classList 

用于设置给定的 class 是否存在, 也可以绑定响应式
下列是一个点击切换 class 的示例

import style from "./main.css";
import { createSignal } from "solid-js";

export default function Container() {
  const [hasTextClassName, setHasTextClassName] = createSignal(false);
  return (
    <div 
      classList={
        {
          [style.container]: true,
          [style.text]: hasTextClassName()
        }
      } 
      onClick={
        ()=> setHasTextClassName(!hasTextClassName())
      }
    >
    text
    </div>
  )
}

ref/ref转发

<div ref={myDiv}>My Element</div>;
<div ref={el => /* 处理 el... */}>My Element</div>
<canvas ref={props.ref} width="256" height="256" />

指令

Solid 通过 use: 命名空间支持自定义指令。但这只是 ref 一个有用的语法糖，类似于原生的绑定，并且可以在同一个元素上有多个绑定而不会发生冲突。这可以让我们更好地利用可重用 DOM 元素行为。 

<div class="modal" use:clickOutside={() => setShow(false)}>
  Some Modal
</div>

 click-outside.js

//click-outside.js
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener("click", onClick);

  onCleanup(() => document.body.removeEventListener("click", onClick));
}

 Props

设置props默认值（mergeProps）

一般情况

export default function Greeting(props) {
  return <h3>{props.greeting || "Hi"} {props.name || "John"}</h3>
}

使用mergeProps 

export default function Greeting(props) {
  const merged = mergeProps({ greeting: "Hi", name: "John" }, props);
  return <h3>{merged.greeting} {merged.name}</h3>
}

解构Props（splitProps）

使用直接解构的方式，会失去响应性

export default function Greeting(props) {
  const { greeting, name, ...others } = props;
  return <h3 {...others}>{greeting} {name}</h3>
}

使用splitProps可以保持其相应行 

export default function Greeting(props) {
  const [local, others] = splitProps(props, ["greeting", "name"]);
  return <h3 {...others}>{local.greeting} {local.name}</h3>
}

注意：solid中的props读取时不可以使用延展操作符，否则会失去响应式

异步

lazy

在应用中，某些组件只在使用时加载，这些组件会被单独打包，在某个时间被按需加载，solid 也提供了方法
使用 lazy 替换普通的静态 import 语句
将 

import Component1 from "./Component1.jsx";

替换为

const Component1 = lazy(() => import("./Component1"));

 由于 lazy 接接收的参数只是返回 Solid 组件的 Promise，因此，还可以在加载的时候附加一些行为

createResource

创建一个可以管理异步请求的信号。fetcher 是一个异步函数，它接受sourceif 提供的返回值并返回一个 Promise，其解析值设置在资源中。fetcher 不是响应式的，因此如果您希望它运行多次，请使用可选的第一个参数。如果源解析为 false、null 或 undefined，则不会获取。

官网在线试玩

const [data, { mutate, refetch }] = createResource(getQuery, fetchData);
// 获取值
data();
// 检查其是否加载中
data.loading;
// 检查是否出错
data.error;
// 直接设置值
mutate(optimisticValue);
// 刷新，重新请求
refetch();

Suspense

Suspense 配合异步组件使用
在尚未加载完毕时显示 fallback 中给定的内容

const Component1 = lazy(() => import("./Component1"));

export default function App() {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Component1></Component1>
    </Suspense>
  )
}

 更多异步

总结

  • Solid 具有高性能，并且具有极小的打包体积，适合打包为独立的模块嵌入其它项目
  • Solid 上手简单，贴合 React 或是 Vue3 开发者的使用习惯
  • Solid 中 JSX 直接返回 DOM 元素，符合直觉，并且很纯净
  • Solid 某些地方需要使用其指定的东西才能达到高性能，高性能并不是毫无代价的
  • Solid 目前使用并不多，生态有待完善

友情链接 

doc、star-history 、size、homepage

songsong9898
关注
深入解析SolidJS：以性能驱动的未来Web开发框架
桂月二二博客
01-03 1215
近年来，前端框架领域出现了许多突破性的创新，而SolidJS以其独特的响应式机制和高性能表现吸引了大量关注。尽管它相对小众，但其设计理念和技术实现极具前瞻性，对于追求性能优化和可维护性的开发者来说尤其值得研究。本文将带你深入解析SolidJS的技术原理、核心特性及其在实际项目中的应用。SolidJS是一个以声明式UI和灵活性为核心的前端框架，灵感来源于React，但与React有着明显的区别。细粒度更新机制：通过编译时优化，仅更新被修改的DOM节点。非虚拟DOM架构：与React、Vue不同，SolidJS
Tauri（一）——更适合 Web 开发人员的桌面应用开发解决方案
brrdg_sefg的博客
12-13 942
（v2.0）（Star 84k）创建小型、快速、安全、跨平台应用程序（v33.0）在此，我们必须提到Electron，它可能是当今最流行的跨平台框架。从其版本的迭代，Star 的数量都不难看出。Electron已经凭借成为众多知名应用程序的基础证明了自己的价值。如上图， 进入该网址可以看到广泛的案例，每一个使用的应用都证明了Electron的强大功能和受欢迎程度。开发社区也对Electron所取得的成就给予了高度认可。
solid-template：SolidJS应用程序的入门模板
02-14
该项目使用启动。 Create Solid是Create React App的一个分支。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 npm run build 构建生产到应用程序build文件夹。 它可以在生产模式下正确捆绑Solid，并优化构建以实现最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 执照
SolidJS——前端新秀框架，性能直逼原生JS
热门推荐
天问博客-专注于大前端技术
01-28 1万+
SolidJS 是什么？SolidJS是一个声明式、高效且灵活用于构建用户界面的 JavaScript 库。 Solid 号称拥有 JSX 语法，类似于 React hook 的语法，你可以用现代化的开发方式，获得性能最快的代码。 一、性能比较 原生 JS 是 1， Solid 是 1.05， 比 Svelte 也快，React 跑到了 1.93 。如图： 二、SolidJS 特点 直接使用浏览器的 DOM, 没有 虚拟DOM， DOM diff 一整套算法 ，可以发现它编译出来的代码，他的 DOM
Solid.js详解：新一代前端框架的崛起
水务人
03-10 1207
（命令式 → 组件化 → 编译时优化 → 细粒度响应式）// 原生信号实现示例// 依赖收集逻辑// 完整生命周期示例}, 1000);});});
高性能前端UI库 SolidJS | 超棒 NPM 库
王乐平 技术博客
01-20 1935
SolidJS是一个声明式的、高效的、编译时优化的JavaScript库，用于构建用户界面。它的核心特点是让你能够编写的代码既接近原生JavaScript，又能够享受到现代响应式框架提供的便利。SolidJS的设计哲学强调了性能与简洁性。它不使用虚拟DOM（Virtual DOM），而是通过编译时的静态分析生成高效的真实DOM更新指令。这种方法使得SolidJS在性能方面非常出色，尤其是在渲染和更新视图方面。SolidJS的响应式系统基于细粒度的响应式原语。
Solid JS基础
qq_31275709的博客
11-08 663
Solid-js 用于构建用户界面的声明式、高效且灵活的 JavaScript 库 您可以在 官方教程 中尝试下面提到的部分例子，本文引用并简化了官方教程中的部分例子 本文讲述部分 solid 主要内容，更多详细内容，移步 Solid API 文档 Solid 使用了和 React 相似的语法和类似 Svelte 的预编译 Solid 使用上类似于 React，使用 JSX 语法，但不同于 React， 组件只会初始化一次，并不是 state 改变就重新运行渲染整个组件，这类似于 Vue3
初识SolidJs
大转转FE
08-30 933
介绍SolidJs 一个用于构建用户界面，简单高效、性能卓越的JavaScript库。性能-始终在UI速度和内存利用率基准测试中名列前茅强大-可组合的响应式原语与 JSX 的灵活性相结合。实用-合理且量身定制的 API 使开发变得有趣而简单。生产力-人体工程化设计和熟悉程度使得构建简单或复杂的东西变得轻而易举。专注于性能性能仅次于原生js一个简单的例子import{render}from...
SolidJS集成Jest预设：简化Node与浏览器测试
2. SolidJS框架简介：SolidJS是一个现代的JavaScript框架，用于构建用户界面。它采用了一种独特的响应式编程方式，其核心理念是尽量减少不必要的渲染，提高应用性能。SolidJS提供了自己的工具和组件库，使得开发者...
SolidJS是什么？SolidJS框架简介
萌萌哒草头将军
05-17 1192
最近刚刚整明白点Svelte感觉整个世界都清净了，但是昨天，有人给我介绍了SolidJS当时我心想：这又是啥玩意啊！经过一番深入交流才知道，居然又是个前端框架。“还有完没完了，一个接一个的框架啥时候是个头啊！不过本着给大家踩坑避雷的精神，我又秉烛夜读，通宵达旦研究了一番。
solid:用于构建用户界面的声明式、高效且灵活的 JavaScript 库
07-23
Solid 是一个用于创建用户界面的声明性 JavaScript 库。 它不使用虚拟 DOM。 相反，它选择将其模板编译为真实的 DOM 节点，并将更新包装在细粒度的React中。 这样，当您的状态仅更新依赖于它运行的代码时。 主要特征 具有细粒度更新的真实 DOM（没有虚拟 DOM！没有脏检查摘要循环！ ）。 声明性数据 没有隐藏规则的简单可组合原语。 不需要生命周期方法或专门配置对象的功能组件。 渲染一次心智模型。 快速地！ 几乎无法区分的性能与优化的痛苦的命令式香草 DOM 代码。 参见 Solid on 。 在中的服务器渲染速度最快 小的！ 完全可摇树的 Solid 编译器将只包含您使用的库的一部分。 支持并建立在 TypeScript 之上。 支持现代功能，例如 JSX、Fragment、Context、Portals、Suspense、Streaming SS
solid：一个声明性，高效且灵活JavaScript库，用于构建用户界面
02-02
Solid是用于创建用户界面的声明性JavaScript库。 它不使用虚拟DOM。 相反，它选择将其模板编译为真实的DOM节点，并将更新包装在细粒度的响应中。 这样，当您的状态仅更新依赖于它的代码时，它将运行。 主要特点 具有细粒度更新的真实DOM（没有虚拟DOM！没有脏检查摘要循环！ ）。 声明性数据 没有隐藏规则的简单可组合基元。 无需生命周期方法或专用配置对象的功能组件。 渲染一次心智模型。 快速！ 性能几乎与优化的命令式原始DOM代码几乎没有区别。 参见Solid on 。 小！ 完全可摇树的Solid编译器将仅包含您使用的库的一部分。 支持并基于TypeScript构建。 支持现代功能，例如JSX，片段，上下文，门户，暂挂，流式SSR，渐进水化，错误边界和并发渲染。 WebComponent友好，可以编写自定义元素 涵盖自定义元素的上下文API 使用Shadow DOM重定向的隐式事件委托 Shadow DOM门户 透明调试： <div>只是一个div。 要旨 import { render } from " solid-js/web " ; const
solid-jest:SolidJS有一个预设
05-13
扎实的笑话 该库包含SolidJS的预设，可以轻松地开始使用Jest测试使用Node的浏览器和服务器渲染。 用法 在你的jest.config.js中 module . exports = { preset : "solid-jest/preset/browser" } ; module . exports = { preset : "solid-jest/preset/node" } ;
solid-debugger:Solid-js的调试器
04-20
固态调试器 玩弄可视化声明图的最佳方法 最终，您将能够编写以下内容 import { render } from "solid-js/web" ; import { Debugger } from "solid-debugger" ; function App ( ) { return < Debugger> your app code here < / Debugger > ; } render ( App , document . getElementById ( "app" ) ) ; 演示版 pnpm i pnpm run dev
又一个前端框架 Solid ？性能直逼原生 JS ？
weixin_46961967的博客
08-18 1638
点击上方前端加加，关注公众号Solid 是什么？Solid 号称拥有 JSX 语法，类似于 React hook 的语法，你可以用现代化的开发方式，获得性能最快的代码。真正的既要又要还要...
推荐你尝试：SolidJS——新一代的高性能React式库
gitblog_00077的博客
05-10 449
推荐你尝试：SolidJS——新一代的高性能React式库 solidA declarative, efficient, and flexible JavaScript library for building user interfaces.项目地址:https://gitcode.com/gh_mirrors/so/solid SolidJS 是一个创新的JavaScript库，专为构建高效...
SolidJS 深度解析：高性能响应式前端框架
最新发布
m0_72900140的博客
03-26 1091
它结合了 React 的声明式 UI 和 Svelte 的编译时优化，同时采用。SolidJS 正在成为 React 和 Svelte 之外的。，避免了虚拟 DOM（Virtual DOM）的开销。：避免不必要的节点创建/销毁，性能更高。，特别适合对性能有极高要求的项目。SolidJS 是一个新兴的。SolidJS 提供。
十分钟掌握使用 SolidJS 构建全栈 CRUD 应用程序
Z__7Gk的博客
08-08 1471
我们可以开始讨论SolidJS，说它比React更好，但没有必要做这种比较。SolidJS只是众多前端框架之一，旨在在Web上快速创建数据驱动。那么，我们为什么要突出这个新孩子呢？
solidjs ref
07-13
在 SolidJS 中，`ref` 是用于创建可变引用的函数。它类似于 React 中的 `useRef`使用 `ref` 函数可以创建一个可变的引用对象，并且可以在组件的生命周期中保持引用的一致性。这在需要在组件渲染期间保持对某个值的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值