Preact:轻量级替代React的选择
Preact是一个轻量级的JavaScript库,它提供了与React相似的API,但体积更小,性能更优。Preact的核心理念是尽可能地保持与React的兼容性,同时去除不必要的部分,使其成为一个理想的替代品,尤其是在对性能和包大小有严格要求的场景中。本文将详细介绍Preact的基本概念、核心API、性能优势以及如何逐步迁移或开始使用Preact。
Preact简介
Preact由Jason Miller在2016年创建,其设计目标是提供一个与React API一致的框架,但体积更小,运行速度更快。Preact的核心库大小仅为3KB(gzip压缩后),而React的大小约为25KB(gzip压缩后)。尽管体积小,Preact仍然提供了React的大部分功能,包括虚拟DOM、组件化、状态管理和生命周期方法。
Preact基础
安装Preact
首先,确保你已经安装了Node.js和npm。然后,使用npm安装Preact和Preact的DOM适配器:
npm install preact preact-render-to-string
创建第一个Preact应用
创建一个HTML文件,引入Preact和Preact的DOM适配器,编写一个简单的组件:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Preact App</title>
</head>
<body><div id="root"></div><script src="https://unpkg.com/preact/preset.js"></script><script>function Hello({ name }) {return <h1>Hello, {name}!</h1>;}preact.render(<Hello name="World" />, document.getElementById('root'));</script>
</body>
</html>
Preact组件
函数组件
在Preact中,函数组件是最常用的组件类型,它接收props作为参数,返回一个或多个虚拟DOM节点:
const Greeting = props => <h1>Hello, {props.name}!</h1>;preact.render(<Greeting name="John Doe" />, document.getElementById('root'));
类组件
类组件继承自preact.Component
,可以使用state
和生命周期方法:
import { Component } from 'preact';class Counter extends Component {state = { count: 0 };increment = () => {this.setState({ count: this.state.count + 1 });};render() {return (<div><p>You clicked {this.state.count} times</p><button onClick={this.increment}>Click me</button></div>);}
}preact.render(<Counter />, document.getElementById('root'));
状态与Props
Props
组件可以通过props属性接收外部传递的数据:
const Profile = ({ name, age }) => (<div><h1>Name: {name}</h1><p>Age: {age}</p></div>
);preact.render(<Profile name="Alice" age={25} />, document.getElementById('root'));
State
组件内部的状态通过setState
方法更新,这将触发组件重新渲染:
class Counter extends Component {state = { count: 0 };increment = () => {this.setState({ count: this.state.count + 1 });};render() {return (<div><p>You clicked {this.state.count} times</p><button onClick={this.increment}>Click me</button></div>);}
}
生命周期方法
Preact的类组件支持生命周期方法,但命名略有不同:
componentWillLoad()
:组件即将加载时调用。componentDidLoad()
:组件加载完成后调用。componentWillUpdate()
:组件即将更新时调用。componentDidUpdate()
:组件更新完成后调用。componentWillUnmount()
:组件即将卸载时调用。
class LifecycleDemo extends Component {state = { count: 0 };componentDidMount() {console.log('Component did mount');}componentDidUpdate() {console.log('Component did update');}componentWillUnmount() {console.log('Component will unmount');}render() {return (<div><p>{this.state.count}</p><button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button></div>);}
}
Hooks
Preact支持React Hooks,包括useState
、useEffect
等:
import { useState } from 'preact/hooks';const Counter = () => {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
};
虚拟DOM与Diff算法
Preact使用虚拟DOM来提高性能,它通过比较前后两次渲染的虚拟DOM树,仅更新有变化的部分,而不是重绘整个页面。
事件处理
Preact的事件处理与React类似,使用驼峰式命名,如onClick:
const Button = ({ onClick }) => <button onClick={onClick}>Click me</button>;preact.render(<Button onClick={() => alert('Clicked!')} />, document.getElementById('root'));
条件渲染与列表渲染
Preact支持使用三元运算符或逻辑与运算符进行条件渲染,使用map函数进行列表渲染:
const UserList = ({ users }) => (<ul>{users.map(user => (<li key={user.id}>{user.name}</li>))}</ul>
);
Context API
Preact的Context API用于跨组件传递数据,避免了props drilling
:
import { createContext, useContext } from 'preact/hooks';const ThemeContext = createContext('light');const ThemeProvider = ({ children }) => (<ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
);const App = () => {const theme = useContext(ThemeContext);return <div>Current theme is {theme}</div>;
};preact.render(<ThemeProvider><App /></ThemeProvider>,document.getElementById('root')
);
Preact CLI与构建工具
Preact CLI
是一个脚手架工具,用于快速创建和配置Preact项目。它提供了与Create React App
类似的功能,包括代码拆分、热模块替换和生产构建等功能。
# 创建新项目
npx create-preact-app my-app
cd my-app
npm start
相关文章:
Preact:轻量级替代React的选择
Preact是一个轻量级的JavaScript库,它提供了与React相似的API,但体积更小,性能更优。Preact的核心理念是尽可能地保持与React的兼容性,同时去除不必要的部分,使其成为一个理想的替代品,尤其是在对性能和包大…...
全栈嵌入式C++、STM32、Modbus、FreeRTOS和MQTT协议:工业物联网(IIoT)可视化系统设计思路(附部分代码解析)
项目概述 随着工业4.0时代的到来,工业物联网(IIoT)在提高生产效率、降低运营成本和实现智能制造方面得到了广泛应用。本项目旨在开发一个全面的工业物联网监控系统,能够实时监测设备的温度、压力、振动和电流等参数,并…...
Greenplum数据库中的数据倾斜问题及处理方法
一、数据倾斜问题的原因 数据分布不均匀:当数据在表的分区或分片中不均匀分布时,会导致某些分区或分片的数据量较大,从而引发数据倾斜问题。连接键存在热点数据:如果连接操作中使用的键值存在热点数据,即某些键值出现…...
缓存设计理论
缓存设计理论是一个涉及多个方面的复杂主题,主要目标是优化数据访问速度,减少数据访问延迟,提高系统性能,并同时保持数据的一致性和系统的稳定性。以下是从几个关键方面对缓存设计理论的概述: 一、缓存的作用与目的 …...
IDEA-安装插件 驼峰下划线转换
第一步:安装 file-settings-plugins-在marketplace搜索“CamelCase”-点击安装 第二步:设置 file-settings-editor-camel_case 第三步:使用 选中想转换的遍历 使用快捷键 Alt Shift U...
乾坤: 微前端项目切换时样式闪动(从无样式变为正常样式需要等 css chunk 文件加载完成, 加载延时受网速影响)
背景: 点击基座项目页面左侧目录, 进入微前端子项目页面, 会有短暂的样式未加载效果一闪而过, 造成页面闪烁或更严重的其他样式错位问题 定位: 同事查了 qiankun git 项目的 issue: https://github.com/umijs/qiankun/issues/219 , 找到解决方案 解决: 项目 webpack 打包配…...
《电子元器件之固态电容》
固态电容全称是固态铝质电解电容,它与普通液态铝质电解电容的最大差别在于采用了不同的介电材料。液态铝电容介电材料为电解液,而固态电容的介电材料是固态的导电性高分子材料。 固态电容和液态电容,从外观上区分,就是固态电容顶…...
PLC 远程下载网关
一、 产品概述 SSF-BOX-100 是三石峰科技有限公司推出的工业级 PLC 远程下载网关,主 要用于 PLC 远程调试、程序上下载,为用户提供一种简单可靠的远程维护方案。 1.1 SGBOX 软件 SGBOX 软件是 SSF-BOX-100 网关的配套软件,可以查看设备状态…...
【Django】 读取excel文件并在前端以网页形式显示-安装使用Pandas
文章目录 安装pandas写views写urls安装openpyxl重新调试 安装pandas Pandas是一个基于NumPy的Python数据分析库,可以从各种文件格式如CSV、JSON、SQL、Excel等导入数据,并支持多种数据运算操作,如归并、再成形、选择等。 更换pip源 pip co…...
自动控制:带死区的PID控制算法
带死区的PID控制算法 在计算机控制系统中,为了避免控制动作过于频繁,消除因频繁动作所引起的振荡,可采用带死区的PID控制。带死区的PID控制通过引入一个死区,使得在误差较小的范围内不进行控制动作,从而减少控制系统的…...
橙单后端项目下载编译遇到的问题与解决
今天下载orange-admin项目,不过下载下来运行出现一些问题。 1、涉及到XMLStreamException的几个类都出现下面的错误 The package javax.xml.stream is accessible from more than one module: <unnamed>, java.xml ctrl-shift-t 可以找到这个引入是哪些包里…...
EasyExcel 初使用—— Java 实现多种写入 Excel 功能
前言 大家好,我是雪荷。之前有一篇博客(EasyExcel 初使用—— Java 实现读取 Excel 功能_java easyexcel.read-CSDN博客)介绍了 Java 如何读取 Excel 表格,那么此篇博客就和大家介绍下 Java 如何利用 EasyExcel 写入 Excel。 Ea…...
MySQL 和 SQL Server 中的连表更新 UPDATE JOIN 写法比较
MySQL 和 SQL Server 中的连表更新 UPDATE JOIN 写法比较 一、前言1. MySQL 写法1.1 解释 2. SQL Server 写法2.1 解释 二、总结 一、前言 在关系型数据库管理系统(RDBMS)中,使用 UPDATE 语句进行表格更新是非常常见的操作。特别是当需要根据…...
手把手教你FL Studio 24.1.1.4234中文破解安装激活图文激活教程
在数字化音乐制作的浪潮中,FL Studio 24.1.1.4234中文破解版的发布无疑又掀起了一股新的热潮。这款由Image-Line公司开发的数字音频工作站(DAW)软件,以其强大的功能和易用的界面,赢得了全球无数音乐制作人的青睐。本文…...
使用Spring Boot与Spire.Doc实现Word文档的多样化操作
博客主页: 南来_北往 系列专栏:Spring Boot实战 前言 使用Spring Boot与Spire.Doc实现Word文档的多样化操作具有以下优势: 强大的功能组合:Spring Boot提供了快速构建独立和生产级的Spring应用程序的能力,而Spire.Doc则…...
从食堂采购系统源码到成品:打造供应链采购管理平台实战详解
本篇文章,笔者将详细介绍如何从食堂采购系统的源码开始,逐步打造一个完备的供应链采购管理平台,帮助企业实现采购流程的智能化和高效化。 一、需求分析与规划 一般来说,食堂采购系统需要具备以下基本功能: 1.供应商…...
在window将Redis注册为服务
将redis注册为系统服务,开启自启动 安装服务 默认注册完之后会自动启动,在window中的服务看一下,如果启动类型为自动,状态是自动运行则启动完成。如果是手动,需要右键属性调整为自动,在点击启动,…...
PHP商城案例
http://www.e9933.com/...
Linux:bash在被调用时会读取哪些启动文件?
(本文基于5.1-6ubuntu1.1版本的bash) bash在被调用时会读取哪些启动文件?要回答这个问题,首先要弄清楚两个概念:login shell和interactive shell。 login shell login shell是指这样的shell: 第一个命令行参数(进程…...
帆软FineReport之替换函数
在日常帆软FineReport中经常会使用字符串替换函数,记录下来,方便备查。 一、字符串替换 第一种、指定文本替换 使用SUBSTITUTE函数,语法如下所示 SUBSTITUTE(text,old_text,new_text,instance_num) 字段…...
Redis的应用场景及类型
目录 一、Redis的应用场景 1、限流 2、分布式锁 3、点赞 4、消息队列 二、Redis类型的命令及用法 1、String类型 2、Hash类型 3、List类型 4、Set类型 5、Zset类型 6、Redis工具类 Redis使用缓存的目的就是提升读写性能 实际业务场景下,我们就可以把 Mys…...
【图像处理】不智能的目标识别
目录 目标识别的划分 识别入门 概念学习 滤波 模版 阈值化 形态学操作 开运算 闭运算 编程语言 示例 大家有没有想过在没有人工智能或者说没有机器学习的的时候,计算机是怎么做目标识别的? 计算机视觉时至今日也是急需人才的领域&…...
《500 Lines or Less》(5)异步爬虫
https://aosabook.org/en/500L/a-web-crawler-with-asyncio-coroutines.html ——A. Jesse Jiryu Davis and Guido van Rossum 介绍 网络程序消耗的不是计算资源,而是打开许多缓慢的连接,解决此问题的现代方法是异步IO。 本章介绍一个简单的网络爬虫&a…...
Transformer!自注意力机制的高层级理解Attention Is All You Need!
背景 最近在不断深入学习LLM的相关内容,那么transformer就是一个绕不开的话题。然而对于一个NLP门外汉来说,论文看得是真头疼,总览全网,我们似乎缺少一个至高而下的高层级理解。所以本文就来弥补此方面的缺失~ 本文并不讲解有关…...
关于使用Postman在请求https网址没有响应,但是用浏览器有响应的问题解决
一、问题描述 使用postman调用正式环境的公共接口,无需鉴权,但是产生了返回状态码200,但是data中却无数据,如下 {"code": "200","message": "操作成功","data": {"qr_c…...
【React 】开发环境搭建详细指南
文章目录 一、准备工作1. 安装 Node.js 和 npm2. 选择代码编辑器 二、创建 React 项目1. 使用 Create React App2. 手动配置 React 项目 三、集成开发工具1. ESLint 和 Prettier2. 使用 Git 进行版本控制 在现代前端开发中,React 是一个非常流行的框架,用…...
结构体笔记
结构体 C语言中的数据类型: 基本数据类型:char/int/short/double/float/long 构造数据类型:数组,指针,结构体,共用体,枚举 概念: 结构体是用户自定义的一种数据类型,…...
Elasticsearch:Golang ECS 日志记录 - zerolog
ECS 记录器是你最喜欢的日志库的格式化程序/编码器插件。它们可让你轻松地将日志格式化为与 ECS 兼容的 JSON。在本教程中,我将详述如何 编码器以 JSON 格式记录日志,并以 ECS 错误格式处理错误字段的记录。 默认情况下,会添加以下字段&…...
Ip2region - 基于xdb离线库的Java IP查询工具提供给脚本调用
文章目录 Pre效果实现git clone编译测试程序将ip2region.xdb放到指定目录使用改进最终效果 Pre OpenSource - Ip2region 离线IP地址定位库和IP定位数据管理框架 Ip2region - xdb java 查询客户端实现 效果 最终效果 实现 git clone git clone https://github.com/lionsou…...
研发管理革命:探索顶尖的工时系统选择
国内外主流的10款研发工时管理系统对比:PingCode、Worktile、无鱼项目工时系统、Toggl Track、泽众ALM、Asana、Jira、GitHub、Trello、TrackingTime。 在研发团队中,工时管理常常成为效率瓶颈,尤其是在资源分配和项目进度跟踪方面。选择合适…...
微服务-MybatisPlus下
微服务-MybatisPlus下 文章目录 微服务-MybatisPlus下1 MybatisPlus扩展功能1.1 代码生成1.2 静态工具1.3 逻辑删除1.4 枚举处理器1.5 JSON处理器**1.5.1.定义实体****1.5.2.使用类型处理器** **1.6 配置加密(选学)**1.6.1.生成秘钥**1.6.2.修改配置****…...
【python_将一个列表中的几个字典改成二维列表,并删除不需要的列】
def 将一个列表中的几个字典改成二维列表(original_list,headersToRemove_list):# 初始化一个列表用于存储遇到的键,保持顺序ordered_keys []# 遍历data中的每个字典,添加其键到ordered_keys,如果该键还未被添加for d in original_list:for …...
IDEA的pom.xml显示ignored 的解决办法
问题: idea中创建Maven module时,pom.xml出现ignored。 原因: 相同名称的module在之前被创建删除过,IDEA会误以为新的同名文件是之前删除掉的,将这个新的module的pom.xml文件忽略掉显示ignored. 解决: 在…...
2. 卷积神经网络无法绕开的神——LeNet
卷积神经网络无法绕开的大神——LeNet 1. 基本架构2. LeNet 53. LeNet 5 代码 1. 基本架构 特征抽取模块可学习的分类器模块 2. LeNet 5 LeNet 5: 5 表示的是5个核心层,2个卷积层,3个全连接层.核心权重层:卷积层、全连接层、循环层ÿ…...
【区块链】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
审核看清楚了 ! 这是以太坊测试网络!用于学习的测试网络!!! 有关web3 和区块链的内容为什么要给我审核不通过? 别人凭什么可以发! 目标成果: 实现功能分析: 显示账户信…...
关于珞石机器人二次开发SDK的posture函数的算法RX RY RZ纠正 C#
在珞石SDK二次开发的函数钟,获取当前机器人位姿的函数posture函数在输出时会发现数据不正确,与示教器数据不一致。 其中第一个数据正确 第二三各数据为相反 第四五六各数据为弧度制 转换方法为(弧度/PI)*180度 然后发现第四个数据还要加上180度 第五…...
【Three.js基础学习】17.imported-models
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 课程回顾: 如何在three.js 中引入不同的模型? 1. 格式 (不同的格式) https://en.wikipedia.org/wiki/List_of_file_form…...
Spring Bean - xml 配置文件创建对象
类型: 1、值类型 2、null (标签) 3、特殊符号 (< -> < ) 4、CDATA <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/bea…...
uniapp map组件自定义markers标记点
需求是根据后端返回数据在地图上显示标记点,并且根据数据状态控制标记点颜色,标记点背景通过两张图片实现控制 <mapstyle"width: 100vw; height: 100vh;":markers"markers":longitude"locaInfo.longitude":latitude&…...
Windows:批处理脚本学习
目录 一、第一个批处理文件 1. &&和 | | 2. | 和 & 二、变量 1.传参变量%name 2.初始化变量set命令 3.变量的使用 4.局部变量与全局变量 5.使用环境变量 6.扩充变量语法 三、注释REM和 :: 四:函数 1.定义函数 2.…...
Dav_笔记10:Using SQL Plan Management之4
SQL管理库 SQL管理库(SMB)是驻留在SYSAUX表空间中的数据字典的一部分。它存储语句日志,计划历史记录,SQL计划基准和SQL配置文件。为了允许每周清除未使用的计划和日志,SMB使用自动空间管理。 您还可以手动将计划添加到SMB以获取一组SQL语句。从Oracle Database 11g之前的…...
通过json传递请求参数,如何处理动态参数和接口依赖
嗨,大家好,我是兰若姐姐,今天给大家讲一下如何通过json传递请求参数,如何处理动态参数和接口依赖 1. 使用配置文件和模板 在 test_data.json 中,你可以使用一些占位符或模板变量,然后在运行测试之前&…...
[240727] Qt Creator 14 发布 | AMD 推迟 Ryzen 9000芯片发布
目录 Qt Creator 14 发布Qt Creator 14 版本发布,带来一系列新功能和改进终端用户可通过命令行方式查看此新闻终端用户可通过命令行方式安装软件: AMD 推迟 Ryzen 9000芯片发布 Qt Creator 14 发布 Qt Creator 14 版本发布,带来一系列新功能…...
PLSQL Developer工具查询数据,报错(动态性能表不可访问)
解决的问题: 解决方案: 在配置-首选项-选项,取消勾选“自动统计”,保存之后即可查询数据...
基于 HTML+ECharts 实现智慧交通数据可视化大屏(含源码)
构建智慧交通数据可视化大屏:基于 HTML 和 ECharts 的实现 随着城市化进程的加快,智慧交通系统已成为提升城市管理效率和居民生活质量的关键。通过数据可视化,交通管理部门可以实时监控交通流量、事故发生率、道路状况等关键指标,…...
探索 IT 领域的新宠儿:量子计算
目录 引言:从经典到量子的飞跃 量子计算的基本概念 量子计算的独特优势 量子计算的深度剖析 量子计算的最新进展 量子计算的行业应用前景 面临的挑战与未来展望 结语:迎接量子计算的新时代 引言:从经典到量子的飞跃 在信息技术飞速发…...
TSPNet代码分析
论文《Realigning Confidence with Temporal Saliency Information for Point-Level Weakly-Supervised Temporal Action Localization》的official code分析 论文解读 代码分析 先看看训练过程,执行main if __name__ == __main__:exp = Exp()if exp.config.mode == eval:…...
Ubuntu上安装anaconda创建虚拟环境(各种踩坑版)
之前都是在Windows桌面版进行深度学习的环境部署及训练,今天尝试了一下在Ubuntu上进行环境部署,踩了不少坑,提供一些解决办法给大家避雷。 目录 一、下载和安装anaconda 1. 下载 2. 安装 二、创建虚拟环境 一、下载和安装anaconda 1. …...
DC-5靶机通关
今天我们来学习DC-5靶机!!! 1.实验环境 攻击机:kali2023.2 靶机:DC-5 2.1扫描网段 2.2扫描端口 这里后面这俩端口有点似曾相识啊,在dc3里面好像见过,那咱们给这两个端口来个更详细的扫描&…...
AI学习记录 -使用react开发一个网页,对接chatgpt接口,附带一些英语的学习prompt
实现了如下功能(使用react实现,原创) 实现功能: 1、对接gpt35模型问答,并实现了流式传输(在java端) 2、在实际使用中,我们的问答历史会经常分享给他人,所以下图的 copy …...