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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/48737.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++STL详解(三)——vector类的接口详解

目录 一.vector的介绍 二.vector的构造以及赋值 2.1构造函数 2.2operator重载 三.vector的空间操作 3.1capacity和size函数 3.2reserve和resize函数 3.3empty函数 四.vector迭代器相关函数 4.1begin和end函数 4.2rbegin和rend函数 五.vector的增删查改 5.1push_back和…

web前端 React 框架面试200题(一)

面试题 1. 简述什么是React &#xff08; 概念 &#xff09;&#xff1f; 参考回答&#xff1a; 1、React是Facebook开发的一款JS库。 2、React一般被用来作为MVC中的V层&#xff0c;它不依赖其他任何的库&#xff0c;因此开发中&#xff0c;可以与任何其他的库集成使用&…

QT串口和数据库通信

创建串口 串口连接客户端并向服务器发送消息 client.pro #------------------------------------------------- # # Project created by QtCreator 2024-07-02T14:11:20 # #-------------------------------------------------QT core gui network QT core gui…

【React】箭头函数:现代 JavaScript 的高效编程方式

文章目录 一、箭头函数的基本语法二、箭头函数的特性三、在 React 中的常见用法四、最佳实践 在现代 JavaScript 中&#xff0c;箭头函数&#xff08;Arrow Functions&#xff09;是一种简洁的函数表达方式&#xff0c;并且在 React 开发中非常常见。箭头函数不仅简化了函数的语…

RockyLinux 9 PXE Server bios+uefi 自动化部署 RockLinux 8 9

pxe server 前言 PXE&#xff08;Preboot eXecution Environment&#xff0c;预启动执行环境&#xff09;是一种网络启动协议&#xff0c;允许计算机通过网络启动而不是使用本地硬盘。PXE服务器是实现这一功能的服务器&#xff0c;它提供了启动镜像和引导加载程序&#xff0c;…

前端开发知识(三)-javascript

javascript是一门跨平台、面向对象的脚本语言。 一、引入方式 1.内部脚本&#xff1a;使用<script> &#xff0c;可以放在任意位置&#xff0c;也可以有多个&#xff0c;一般是放在<body></body>的下方。 2.外部脚本&#xff1a;单独编写.js文件&#xff…

【HarmonyOS】应用设置屏幕常亮

【HarmonyOS】应用设置屏幕常亮 一、问题背景&#xff1a; 金融类或钱包场景的应用APP&#xff0c;对于付款码&#xff0c;扫一扫等场景都会对屏幕设置常亮。防止屏幕长时间不操作&#xff0c;自动息屏。 目前这种场景的需求也是非常有必要的&#xff0c;也是行业内默认的处理…

Spark 解析嵌套的 JSON 文件

1、什么是嵌套的JSON文件&#xff1f; 嵌套的JSON文件是指文件中包含了嵌套的JSON对象或数组。例如&#xff0c;以下是一个嵌套的JSON文件的示例&#xff1a; {"name": "John","age": 30,"address": {"street": "123…

解码目标检测:可解释性的关键角色

解码目标检测&#xff1a;可解释性的关键角色 在人工智能的浪潮中&#xff0c;目标检测作为计算机视觉领域的一个核心任务&#xff0c;已经取得了显著的进展。然而&#xff0c;随着深度学习模型在这一领域的广泛应用&#xff0c;模型的可解释性逐渐成为研究者关注的焦点。本文…

HarmonyOS实现跨语言交互(Node-API)

Node-API简介 通过Native接口&#xff0c;实现两种代码的交互。 是在Node.js提供的Node-API基础上扩展而来&#xff0c;但与Node.js中的Node-API不完全兼容。本质就是提供了对C/C代码的使用接口&#xff0c;使得两种代码共同工作。规范I/O、CPU密集型、OS底层等能力。 应用场景…

工作中es客户端常见使用错误

背景&#xff1a; 7月9日因阿里云底层网络故障导致使用阿里云产品&#xff08;redis&#xff0c;rocketmq等&#xff09;均受影响&#xff0c;因为业务依赖mq异步将数据写入elasticsearch中&#xff0c;mq发送失败导致es部分数据丢失。丢失的数据需要从mysql中恢复到es中&…

景区AR导航营销系统:技术解决方案与实施效益分析

随着旅游市场的竞争日益激烈&#xff0c;景区需要不断创新以吸引游客。景区 AR 导航将虚拟画面与现实场景相结合&#xff0c;为游客提供了更加直观、生动的导航服务。对于景区而言&#xff0c;这一创新技术无疑是吸引游客目光、提升景区知名度的有力武器。通过独特的 AR 导航体…

CentOS怎么关闭自动锁屏?

禁止自动锁屏 有时候几分钟不用Centos&#xff0c;系统就自动锁屏了&#xff0c;这是一种安全措施&#xff0c;防止别人趁你不在时使用你的系统。但对于大部分人而言&#xff0c;这是没有必要的&#xff0c;尤其是Centos虚拟机&#xff0c;里面没啥重要的东西&#xff0c;每次…

如何将整个运行环境打包成docker

场景 某个项目&#xff0c;用的tomcatrediszookeeper&#xff0c;然后这个项目已经产品化&#xff0c;很多地方都需要部署&#xff0c;并且有很多有细微差别的版本。 然后我这边是需要部署测试环境&#xff0c;一台机可能会部署好几个。 按照传统部署方式&#xff0c;要好几个…

STM32-寄存器ADC配置指南

目录 输入方式&#xff1a; 模拟看门狗功能&#xff1a; ADC中断 配置一个Demo 设置时钟 自校准 通道选择 采样时间选择 转换模式选择 断续模式 启动转换 软件触发 外部触发 转换结束 关于DMA 模拟看门狗 ​编辑ADC数据位置​编辑 在STM32F中&#xff0c;ADC可…

opencv—常用函数学习_“干货“_13

目录 三四、机器学习 支持向量机&#xff08;SVM&#xff09; K近邻算法&#xff08;KNearest&#xff09; 随机森林&#xff08;RTrees&#xff09; 朴素贝叶斯分类器&#xff08;NormalBayesClassifier&#xff09; 自适应增强算法&#xff08;Boost&#xff09; 多层感…

ASP.NET CORE依赖注入全面解析:理解DependencyInjectionAbstractions的核心

引言 ASP.NET Core中&#xff0c;依赖注入&#xff08;Dependency Injection, DI&#xff09;是其核心功能之一。它通过Microsoft.Extensions.DependencyInjection命名空间提供默认的DI容器&#xff0c;实现了松耦合和模块化设计。在本文中&#xff0c;我们将深入剖析ASP.NET …

通过json传递请求参数,如何处理动态参数和接口依赖

嗨&#xff0c;大家好&#xff0c;我是兰若姐姐&#xff0c;今天给大家讲一下如何通过json传递请求参数&#xff0c;如何处理动态参数和接口依赖 1. 使用配置文件和模板 在 test_data.json 中&#xff0c;你可以使用一些占位符或模板变量&#xff0c;然后在运行测试之前&…

手写数字识别(机器学习)

一&#xff1a;一对多分类方法(one-vs-all) 这里先上的代码&#xff0c;想看原理可以到代码下面。 在数据集中&#xff0c;y的取值为1~10&#xff0c;y10表示当前数字为0 首先读取数据,并对数据进行切分。 import pandas as pd import numpy as np import matplotlibmatplo…

【BUG】已解决:IndexError: positional indexers are out-of-bounds

IndexError: positional indexers are out-of-bounds 目录 IndexError: positional indexers are out-of-bounds 【常见模块错误】 【解决方案】 原因分析 解决方法 示例代码 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博…