专注于性能的 SolidJS solidstatedisk
liuian 2024-12-30 05:16 24 浏览
大家好,我是Echa哥。
介绍
SolidJS 一个用于构建用户界面,简单高效、性能卓越的 JavaScript 库。
- 性能-始终在UI速度和内存利用率基准测试中名列前茅
- 强大-可组合的响应式原语与 JSX 的灵活性相结合。
- 实用-合理且量身定制的 API 使开发变得有趣而简单。
- 生产力-人体工程化设计和熟悉程度使得构建简单或复杂的东西变得轻而易举。
全栈修仙之路专注分享 TS、Vue3、前端架构和源码解析等技术干货。159篇原创内容
公众号
专注于性能
性能仅次于原生JS
一个简单的例子
import { render } from "solid-js/web";
const App = () => <div> hello solidjs!</div>
render(() => <App/>, document.getElementById("app"))
写过react的应该很熟悉这段代码,jsx片段,render函数。会让你感觉既熟悉又现代。
响应式
createSignal
import { render } from "solid-js/web";
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
setInterval(() => setCount(count() + 1), 1000);
return <div>{count()}</div>;
}
render(() => <Counter />, document.getElementById('app'));
signal是solid中基本的响应单元,createSignal类似react中的useState,传递给createSignal调用的参数是初始值,createSignal返回一个两个==函数==的数组,第一个getter,第二个是setter,第一个返回的值是一个getter而不是一个值,使用的时候需要调用,框架拦截读取值的任何位置来进行自动跟踪,从而响应式更新,所以调用getter的位置很重要,和react不同的是,例如setState触发更新,react会生成Fiber树,进行diff算法,最后执行dom操作。solid则是直接调用编译好的dom操作方法,没有虚拟dom比较。
createEffect
import { render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
createEffect(() => {
console.log('count is :', count())
})
return <button onClick={() => setCount(count() + 1)}>Click me</button>;
}
render(() => <Counter />, document.getElementById('app'));
createEffect接收一个函数,监听其执行情况,createEffect会自动订阅在执行期间读取的所有Signal,并在Signal值之一发生改变的时候,重新运行此函数。count更改的时候,createEffect函数就会运行,从而点击一次,就打印一次结果。类似react的useEffect
useEffect(() => {/*....*/}, [count])
衍生Signal
import { render } from "solid-js/web";
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
const doubleCount = () => count() * 2
setInterval(() => setCount(count() + 1), 1000);
return <div>Count: {doubleCount()}</div>;
}
render(() => <Counter />, document.getElementById('app'));
这次没有直接使用count(), 而是使用了doubleCount函数包了一层count() * 2, 日志正常打印2倍的count(), 意味着任何包装count()的函数,都是一个Signal,访问JSX中的js表达式也是,只要访问一个signal,就会触发更新。
Props
Props是组件执行的时候传进来的对象,Props是只读的,并且具备对象getter的响应性的,但是响应性,只能通过props.propsName的形式来访问,才能被追踪到。不能解构props,解构就会脱离追踪范围而失去响应。
默认Props
// greeting.jsx
import { mergeProps } from "solid-js";
export default function Greeting(props) {
return <h3>{props.greeting || "Hi"} {props.name || "John"}</h3>
<!--const { greeting, name } = props-->
<!--return <h3>{greeting || 'Hi'} {name || 'John'}</h3>-->
}
// main.jsx
import { render } from "solid-js/web";
import { createSignal } from "solid-js";
import Greeting from "./greeting";
function App() {
const [name, setName] = createSignal();
return <>
<Greeting greeting="Hello" />
<Greeting name="Jeremy" />
<Greeting name={name()} />
<button onClick={() => setName("Jarod")}>Set Name</button>
</>;
}
render(() => <App />, document.getElementById('app'));
当然SolidJS也是提供了一个工具函数mergeProps,使得具有响应性。
// greeting.jsx
import { mergeProps } from "solid-js";
export default function Greeting(props) {
const merged = mergeProps({ greeting: "Hi", name: "John" }, props)
return <h3>{merged.greeting} {merged.name}</h3>
}
分离Props
合并props用到的地方很少,我们经常用到的是解构组件传进来的props,然后将其他props分离出来,再传递下去。
// greeting.jsx
export default function Greeting(props) {
const { greeting, name, ...others } = props;
return <h3 {...others}>{greeting} {name}</h3>
}
直接解构分离,设置name的时候,不会更新,也就是解构的时候失去了响应性。但是solid为我们提供了分离props的函数splitProps,来保持响应性。
// greeting.jsx
export default function Greeting(props) {
const [local, others] = splitProps(props, ["greeting", "name"]);
return <h3 {...others}>{local.greeting} {local.name}</h3>
}
Store
内嵌式响应
solid可以独立处理嵌套更新,是因为它提供了一细粒度响应式,也就是哪里需要更新,就更新哪里,指哪打哪。
import { render } from "solid-js/web";
import { For, createSignal } from "solid-js";
const App = () => {
const [todos, setTodos] = createSignal([])
let input;
let todoId = 0;
const addTodo = (text) => {
// setTodos([...todos(), { id: ++todoId, text, completed: false }]);
const [completed, setCompleted] = createSignal(false)
setTodos([...todos(), { id: ++todoId, text, completed, setCompleted }]);
}
const toggleTodo = (id) => {
// setTodos(todos().map((todo) => (
// todo.id !== id ? todo : { ...todo, completed: !todo.completed }
// )));
const index = todos().findIndex((t) => t.id === id);
const todo = todos()[index];
if (todo) todo.setCompleted(!todo.completed())
}
return (
<>
<div>
<input ref={input} />
<button
onClick={(e) => {
if (!input.value.trim()) return;
addTodo(input.value);
input.value = "";
}}
>
Add Todo
</button>
</div>
<For each={todos()}>
{(todo) => {
const { id, text } = todo;
console.log(`Creating ${text}`)
return <div>
<input
type="checkbox"
checked={todo.completed}
onchange={[toggleTodo, id]}
/>
<span
style={{ "text-decoration": todo.completed ? "line-through" : "none"}}
>{text}</span>
</div>
}}
</For>
</>
);
};
render(App, document.getElementById("app"));
两种方式,第一种是追踪todos()更新,效果是新增的时候会触发渲染,等到toggleTodo的时候还是会触发渲染,第二种是,嵌套更新,追踪对象的属性completed(), 新增的时候追踪todos()变化,渲染dom,等到toggleTodo的时候,只会触发数据更新,dom已经渲染了,没有必要再次渲染了。
创建store
store是代理对象,属性可以被跟踪,那么是不是可以实现内嵌式响应,createStore接收一个初始值,返回一个类似于signal的读/写的两个元素,第一个是元素只读的store代理,第二个是setter函数。
import { render } from "solid-js/web";
import { For, createSignal } from "solid-js";
import { createStore } from "solid-js/store";
const App = () => {
let input;
let todoId = 0;
const [store, setStore] = createStore({ todos: [] });
const addTodo = (text) => {
setStore('todos', (todos) => [...todos, { id: ++todoId, text, completed: false }]);
};
const toggleTodo = (id) => {
setStore('todos', (t) => t.id === id, 'completed', (completed) => !completed);
};
return (
<>
<div>
<input ref={input} />
<button
onClick={(e) => {
if (!input.value.trim()) return;
addTodo(input.value);
input.value = "";
}}
>
Add Todo
</button>
</div>
<For each={store.todos}>
{(todo) => {
const { id, text } = todo;
console.log(`Creating ${text}`)
return <div>
<input
type="checkbox"
checked={todo.completed}
onchange={[toggleTodo, id]}
/>
<span
style={{ "text-decoration": todo.completed ? "line-through" : "none"}}
>{text}</span>
</div>
}}
</For>
</>
);
};
render(App, document.getElementById("app"));
内置组件
Show
条件渲染
import { render } from 'solid-js/web';
import { createSignal, Show } from 'solid-js';
function App() {
const [loggedIn, setLoggedIn] = createSignal(false);
const toggle = () => setLoggedIn(!loggedIn())
return (
<Show
when={loggedIn()}
fallback={() => <button onClick={toggle}>Log in</button>}
>
<button onClick={toggle}>Log out</button>
</Show>
);
}
render(() => <App />, document.getElementById('app'))
For
循环遍历,数据是固定的,index是可追踪的signal,涉及到dom移动的时候,不会触发重新创建dom。只是index独立更新,数据并不会更新。
import { render } from 'solid-js/web';
import { createSignal, For } from 'solid-js';
function App() {
const [cats, setCats] = createSignal([
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
]);
return (
<ul>
<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>
</ul>
);
}
render(() => <App />, document.getElementById('app'))
Index
Index和For不同的是,Index是数据项是signal,索引是固定的。
import { render } from 'solid-js/web';
import { createSignal, Index } from 'solid-js';
function App() {
const [cats, setCats] = createSignal([
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
]);
return (
<ul>
<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>
</ul>
);
}
render(() => <App />, document.getElementById('app'))
Switch
处理互斥条件
import { render } from "solid-js/web";
import { createSignal, Show, Switch, Match } from "solid-js";
function App() {
const [x] = createSignal(7);
return (
//使用show实现
<!--<Show-->
<!-- when={x() > 10}-->
<!-- fallback={-->
<!-- <Show-->
<!-- when={5 > x()}-->
<!-- fallback={<p>{x()} is between 5 and 10</p>}-->
<!-- >-->
<!-- <p>{x()} is less than 5</p>-->
<!-- </Show>-->
<!-- }-->
<!-->-->
<!-- <p>{x()} is greater than 10</p>-->
<!--</Show>-->
//使用Switch实现
<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>
);
}
render(() => <App />, document.getElementById("app"));
Dynamic
比<Show> 或 <Switch> 组件更简练
import { render, Dynamic } from "solid-js/web";
import { createSignal, Switch, Match, For } from "solid-js";
const RedThing = () => <strong style="color: red">Red Thing</strong>;
const GreenThing = () => <strong style="color: green">Green Thing</strong>;
const BlueThing = () => <strong style="color: blue">Blue Thing</strong>;
const options = {
red: RedThing,
green: GreenThing,
blue: BlueThing
}
function App() {
const [selected, setSelected] = createSignal("red");
return (
<>
<select value={selected()} onInput={e => setSelected(e.currentTarget.value)}>
<For each={Object.keys(options)}>{
color => <option value={color}>{color}</option>
}</For>
</select>
<!--<Switch fallback={<BlueThing />}>-->
<!-- <Match when={selected() === "red"} ><RedThing /></Match>-->
<!-- <Match when={selected() === "green"}><GreenThing /></Match>-->
<!--</Switch>-->
<Dynamic component={options[selected()]} />
</>
);
}
render(() => <App />, document.getElementById("app"));
生命周期
onMount
挂载
solid有极少的生命周期,请求数据,以及一些逻辑都写到这个地方,这个函数只会被调用一次。
import { render } from "solid-js/web";
import { createSignal, onMount, For } from "solid-js";
import "./styles.css";
function App() {
const [photos, setPhotos] = createSignal([]);
onMount(async () => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/photos?_limit=20`
);
setPhotos(await res.json());
});
return <>
<h1>Photo album</h1>
<div class="photos">
<For each={photos()} fallback={<p>Loading...</p>}>{ photo =>
<figure>
<img src={photo.thumbnailUrl} alt={photo.title} />
<figcaption>{photo.title}</figcaption>
</figure>
}</For>
</div>
</>;
}
render(() => <App />, document.getElementById('app'));
onCleanup
卸载时
import { render } from "solid-js/web";
import { createSignal, onCleanup } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
const timer = setInterval(() => setCount(count() + 1), 1000);
onCleanup(() => clearInterval(timer));
return <div>Count: {count()}</div>;
}
render(() => <Counter />, document.getElementById('app'));
总结
- 没有虚拟DOM。
- 响应式跟踪更新,指哪打哪。
- 支持jsx
- 写法类似react,上手容易
相关推荐
- 2023年最新微信小程序抓包教程(微信小程序 抓包)
-
声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...
- 测试人员必看的软件测试面试文档(软件测试面试怎么说)
-
前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...
- 复活,视频号一键下载,有手就会,长期更新(2023-12-21)
-
视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...
- 新款HTTP代理抓包工具Proxyman(界面美观、功能强大)
-
不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...
- 使用Charles工具对手机进行HTTPS抓包
-
本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...
- 苹果手机下载 TikTok 旧版本安装包教程
-
目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...
- 【0基础学爬虫】爬虫基础之抓包工具的使用
-
大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...
- 防止应用调试分析IP被扫描加固实战教程
-
防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...
- 一文了解 Telerik Test Studio 测试神器
-
1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...
- HLS实战之Wireshark抓包分析(wireshark抓包总结)
-
0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...
- 信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )
-
HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...
- Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口
-
使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...
- python爬虫教程:教你通过 Fiddler 进行手机抓包
-
今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...
- Fiddler入门教程全家桶,建议收藏
-
学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...
- fiddler如何抓取https请求实现手机抓包(100%成功解决)
-
一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...
- 一周热门
-
-
Python实现人事自动打卡,再也不会被批评
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
系统C盘清理:微信PC端文件清理,扩大C盘可用空间步骤
-
10款高性能NAS丨双十一必看,轻松搞定虚拟机、Docker、软路由
-
python使用fitz模块提取pdf中的图片
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- table.render (33)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)