当前位置: 首页 > news >正文

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,包括useStateuseEffect等:

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库&#xff0c;它提供了与React相似的API&#xff0c;但体积更小&#xff0c;性能更优。Preact的核心理念是尽可能地保持与React的兼容性&#xff0c;同时去除不必要的部分&#xff0c;使其成为一个理想的替代品&#xff0c;尤其是在对性能和包大…...

全栈嵌入式C++、STM32、Modbus、FreeRTOS和MQTT协议:工业物联网(IIoT)可视化系统设计思路(附部分代码解析)

项目概述 随着工业4.0时代的到来&#xff0c;工业物联网&#xff08;IIoT&#xff09;在提高生产效率、降低运营成本和实现智能制造方面得到了广泛应用。本项目旨在开发一个全面的工业物联网监控系统&#xff0c;能够实时监测设备的温度、压力、振动和电流等参数&#xff0c;并…...

Greenplum数据库中的数据倾斜问题及处理方法

一、数据倾斜问题的原因 数据分布不均匀&#xff1a;当数据在表的分区或分片中不均匀分布时&#xff0c;会导致某些分区或分片的数据量较大&#xff0c;从而引发数据倾斜问题。连接键存在热点数据&#xff1a;如果连接操作中使用的键值存在热点数据&#xff0c;即某些键值出现…...

缓存设计理论

缓存设计理论是一个涉及多个方面的复杂主题&#xff0c;主要目标是优化数据访问速度&#xff0c;减少数据访问延迟&#xff0c;提高系统性能&#xff0c;并同时保持数据的一致性和系统的稳定性。以下是从几个关键方面对缓存设计理论的概述&#xff1a; 一、缓存的作用与目的 …...

IDEA-安装插件 驼峰下划线转换

第一步&#xff1a;安装 file-settings-plugins-在marketplace搜索“CamelCase”-点击安装 第二步&#xff1a;设置 file-settings-editor-camel_case 第三步&#xff1a;使用 选中想转换的遍历 使用快捷键 Alt Shift U...

乾坤: 微前端项目切换时样式闪动(从无样式变为正常样式需要等 css chunk 文件加载完成, 加载延时受网速影响)

背景: 点击基座项目页面左侧目录, 进入微前端子项目页面, 会有短暂的样式未加载效果一闪而过, 造成页面闪烁或更严重的其他样式错位问题 定位: 同事查了 qiankun git 项目的 issue: https://github.com/umijs/qiankun/issues/219 , 找到解决方案 解决: 项目 webpack 打包配…...

《电子元器件之固态电容》

固态电容全称是固态铝质电解电容&#xff0c;它与普通液态铝质电解电容的最大差别在于采用了不同的介电材料。液态铝电容介电材料为电解液&#xff0c;而固态电容的介电材料是固态的导电性高分子材料。 固态电容和液态电容&#xff0c;从外观上区分&#xff0c;就是固态电容顶…...

PLC 远程下载网关

一、 产品概述 SSF-BOX-100 是三石峰科技有限公司推出的工业级 PLC 远程下载网关&#xff0c;主 要用于 PLC 远程调试、程序上下载&#xff0c;为用户提供一种简单可靠的远程维护方案。 1.1 SGBOX 软件 SGBOX 软件是 SSF-BOX-100 网关的配套软件&#xff0c;可以查看设备状态…...

【Django】 读取excel文件并在前端以网页形式显示-安装使用Pandas

文章目录 安装pandas写views写urls安装openpyxl重新调试 安装pandas Pandas是一个基于NumPy的Python数据分析库&#xff0c;可以从各种文件格式如CSV、JSON、SQL、Excel等导入数据&#xff0c;并支持多种数据运算操作&#xff0c;如归并、再成形、选择等。 更换pip源 pip co…...

自动控制:带死区的PID控制算法

带死区的PID控制算法 在计算机控制系统中&#xff0c;为了避免控制动作过于频繁&#xff0c;消除因频繁动作所引起的振荡&#xff0c;可采用带死区的PID控制。带死区的PID控制通过引入一个死区&#xff0c;使得在误差较小的范围内不进行控制动作&#xff0c;从而减少控制系统的…...

橙单后端项目下载编译遇到的问题与解决

今天下载orange-admin项目&#xff0c;不过下载下来运行出现一些问题。 1、涉及到XMLStreamException的几个类都出现下面的错误 The package javax.xml.stream is accessible from more than one module: <unnamed>, java.xml ctrl-shift-t 可以找到这个引入是哪些包里…...

EasyExcel 初使用—— Java 实现多种写入 Excel 功能

前言 大家好&#xff0c;我是雪荷。之前有一篇博客&#xff08;EasyExcel 初使用—— Java 实现读取 Excel 功能_java easyexcel.read-CSDN博客&#xff09;介绍了 Java 如何读取 Excel 表格&#xff0c;那么此篇博客就和大家介绍下 Java 如何利用 EasyExcel 写入 Excel。 Ea…...

MySQL 和 SQL Server 中的连表更新 UPDATE JOIN 写法比较

MySQL 和 SQL Server 中的连表更新 UPDATE JOIN 写法比较 一、前言1. MySQL 写法1.1 解释 2. SQL Server 写法2.1 解释 二、总结 一、前言 在关系型数据库管理系统&#xff08;RDBMS&#xff09;中&#xff0c;使用 UPDATE 语句进行表格更新是非常常见的操作。特别是当需要根据…...

手把手教你FL Studio 24.1.1.4234中文破解安装激活图文激活教程

在数字化音乐制作的浪潮中&#xff0c;FL Studio 24.1.1.4234中文破解版的发布无疑又掀起了一股新的热潮。这款由Image-Line公司开发的数字音频工作站&#xff08;DAW&#xff09;软件&#xff0c;以其强大的功能和易用的界面&#xff0c;赢得了全球无数音乐制作人的青睐。本文…...

使用Spring Boot与Spire.Doc实现Word文档的多样化操作

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 前言 使用Spring Boot与Spire.Doc实现Word文档的多样化操作具有以下优势&#xff1a; 强大的功能组合&#xff1a;Spring Boot提供了快速构建独立和生产级的Spring应用程序的能力&#xff0c;而Spire.Doc则…...

从食堂采购系统源码到成品:打造供应链采购管理平台实战详解

本篇文章&#xff0c;笔者将详细介绍如何从食堂采购系统的源码开始&#xff0c;逐步打造一个完备的供应链采购管理平台&#xff0c;帮助企业实现采购流程的智能化和高效化。 一、需求分析与规划 一般来说&#xff0c;食堂采购系统需要具备以下基本功能&#xff1a; 1.供应商…...

在window将Redis注册为服务

将redis注册为系统服务&#xff0c;开启自启动 安装服务 默认注册完之后会自动启动&#xff0c;在window中的服务看一下&#xff0c;如果启动类型为自动&#xff0c;状态是自动运行则启动完成。如果是手动&#xff0c;需要右键属性调整为自动&#xff0c;在点击启动&#xff0c…...

PHP商城案例

http://www.e9933.com/...

Linux:bash在被调用时会读取哪些启动文件?

(本文基于5.1-6ubuntu1.1版本的bash) bash在被调用时会读取哪些启动文件&#xff1f;要回答这个问题&#xff0c;首先要弄清楚两个概念&#xff1a;login shell和interactive shell。 login shell login shell是指这样的shell&#xff1a; 第一个命令行参数&#xff08;进程…...

帆软FineReport之替换函数

在日常帆软FineReport中经常会使用字符串替换函数&#xff0c;记录下来&#xff0c;方便备查。 一、字符串替换 第一种、指定文本替换 使用SUBSTITUTE函数&#xff0c;语法如下所示 SUBSTITUTE(text&#xff0c;old_text&#xff0c;new_text&#xff0c;instance_num) 字段…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...