SolidJs与React区别

news/2024/7/24 5:06:31 标签: 1024程序员节

1、写法上

声明变量
import { createSignal, type Component, createMemo } from 'solid-js';

const [name, setName] = createSignal<string>('');
  • useState 改名成 createSignal
  • 从直接使用name变为通过方法调用name()

createSignal 用来创建响应式数据,它可以跟踪单个值的变化

添加样式函数
const nameOutlineStyle = createMemo(() => ({
    border: nameErrorVisible() ? '1px solid red' : ''
})) 
<input
    class='input name'
    type="text"
    placeholder='Name'
    style={nameOutlineStyle()}
    value={name()}
    onInput={e => setName(e.target.value)}
/>

2、更新速度

  • ReactVue中存在一层虚拟DOM(React中叫Fiber树),每当发生更新,虚拟DOM会进行比较(Diff算法),比较的结果会执行不同的DOM操作(增、删、改)

  • SolidJSSvelte在发生更新时,可以直接调用编译好的DOM操作方法,省去了虚拟DOM比较这一步所消耗的时间


http://www.niftyadmin.cn/n/5118124.html

相关文章

为什么网络安全是IT最后的红利?零基础转网安跳转年薪30w!

这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地&#xff0c;网络安全行业地位、薪资随之水涨船高。 1为什么网络安全行业是IT行业最后的红利&#xff1f; 根据腾讯安全发布的《互联网安全报告》&#xff0c;…

蓝桥杯 Java 青蛙过河

import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改/**二分法从大&#xff08;n&#xff09;到小找足够小的步长前缀和记录每个位置的前面有的总石头数&#xff08;一个石头表示可以容纳一个青蛙&#xff0c;一位置有多少个石头hi就是多少&#xff09;&…

Webpack 基础以及常用插件使用方法

目录 一、前言二、修改打包入/出口配置步骤 三、常用插件使用html-webpack-plugin打包 CSS 代码提取 CSS 代码优化压缩过程打包 less 代码打包图片文件 一、前言 本质上&#xff0c;Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时…

linux驱动文件私有数据(字符设备基础二)

编写linux驱动程序时&#xff0c;通常在驱动开发中会为设备定义相关的设备结构体&#xff0c;将硬件属性的描述信息全部放在该结构体中   Linux 中并没有明确规定要使用文件私有数据&#xff0c;但是在 linux 驱动源码中&#xff0c;广泛使用了文件私有数据&#xff0c;这是 …

关于服务器网络代理解决方案(1024)

方法一、nginx代理 配置代理服务器 在能够访问外网的服务器上&#xff0c;安装和配置 Nginx。你可以使用包管理器来安装 Nginx&#xff0c;例如&#xff1a; csharpCopy codesudo apt-get install nginx # 对于基于 Debian/Ubuntu 的系统 sudo yum install nginx # 对于基于 C…

C语言经典基础题目100题

题目1&#xff1a;有 1、2、3、4 四个数字&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f; 题目2&#xff1a;企业发放的奖金根据利润提成。 利润(I)低于或等于10万元时&#xff0c;奖金可提10%&#xff1b;利润高于10万元&#xff0c…

Hbuilder打包安卓H5-APP,APP与程序分离,更新无需重新打包

一、目标 使用Hbuilder打包H5-APP 两个方式&#xff1a; 1、将自己的H5页面以及js全部打包进apk程序&#xff0c;后续如果更新&#xff0c;只能迭代apk版本&#xff0c;来进行APP更新升级。 2、使用HBuilder打个空包&#xff0c;修改应用入口页面(首页)地址&#xff0c;这里默…

Chapter1:C++概述

此专栏为移动机器人知识体系的 C {\rm C} C基础&#xff0c;基于《深入浅出 C {\rm C} C》(马晓锐)的笔记&#xff0c; g i t e e {\rm gitee} gitee链接: 移动机器人知识体系. 1.C概述 1.1 C概述 计算机系统分为硬件系统和软件系统。 硬件系统&#xff1a;指组成计算机的电子…