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

Python语言实现React框架

5700c58b1f5e57a7a2fdff17e04346c1.png

迷途小书童的 Note

读完需要

6

分钟

速读仅需 2 分钟

1

   

reactpy 介绍

reactpy 是一个用 Python 语言实现的 ReactJS 框架。它可以让我们使用 Python 的方式来编写 React 的组件,构建用户界面。

reactpy 的目标是想要将 React 的优秀特性带入 Python 领域,包括组件化、虚拟 DOM、声明式编程等。它可以无缝集成到我们的 Python 后端应用中。

2

   

实现原理

reactpy 的核心原理是使用 JavaScript 编写的高效 DOM 操作库 InteractJS 与 Python 代码相连接。

  • InteractJS 负责实际的 DOM 操作,实现类 React 的渲染和计算机制

  • Python 端用类的方式定义组件,通过 pyreact 接口与 InteractJSruntime 连接

  • Python 端 state 或 props 变化时,重新 render()并调用 rerender 将变化传给 JS 端

  • InteractJS 通过 DOM diff 运算进行精确更新,重新渲染页面

  • 事件和数据从 JS 端传回 Python 端做处理

3

   

基本用法

使用之前,我们需要安装一下

pip install reactpy

reactpy 的用法与 React 非常类似。下面是一个简单示例

from reactpy import component, html, run# 这是一个定义应用程序显示内容(本例是一个一级标题)的方法,@component装饰器应用其上,会将其转换为组件
@component
def App():return html.h1("Hello, world!")# 将App方法作为参数启动 web server
run(App)

执行上述脚本,在浏览器中打开链接 http://127.0.0.1:8000 ( http://127.0.0.1:8000 )

d3a9f91f0383a974bf64a231690bd835.png

有时候,我们希望两个组件的状态始终保持一致。在下面的示例中,2 个输入框共享相同的状态。状态通过父组件 SyncedInputs 共享。检查 value 和 set_value 变量的值。

from reactpy import component, hooks, html, run@component
def SyncedInputs():value, set_value = hooks.use_state("")return html.p(Input("First input", value, set_value),Input("Second input", value, set_value),)@component
def Input(label, value, set_value):def handle_change(event):set_value(event["target"]["value"])return html.label(label + " ", html.input({"value": value, "on_change": handle_change}))run(SyncedInputs)

执行脚本后,在 First input 中输入的字符,同时也会出现在 Second input 中。

2ed7dfa8adbd9b0c8120de9029440072.gif

下面是一个点击事件处理的示例

from reactpy import component, html, run@component
def PrintButton(display_text, message_text):def handle_event(event):print(message_text)return html.button({"on_click": handle_event}, display_text)@component
def App():return html.div(PrintButton("Play", "Playing"),PrintButton("Pause", "Paused"),)run(App)

当点击 Play 时,终端将打印 Playing,点击 Pause 按钮,将打印 Paused

ee80058efa5b8ff5c0c76402bd816af0.png

最后,再看一个示例,在页面中显示图片

from reactpy import component, html, run@component
def Title(title):return html.h1(title)# 使用网站的logo图片
# 设置CSS样式,width: 30%
@component
def Photo():return html.img({"src": "https://xugaoxiang.com/wp-content/uploads/2020/05/logo.png","style": {"width": "30%"},})@component
def PhotoViewer():return html.section(Title("My logo."),Photo())run(PhotoViewer)

代码运行后,效果是这样的

af7099783ed8ef3e59dc71fe83320997.png

4

   

总结

ReactPy 是一个 Python 库,它为使用 Python 进行前端开发带来了类似 ReactJS 的功能。借助 ReactPy,您可以轻松成为全栈开发人员,使用相同的语言处理前端和后端。

e79f6e613e905077a3eb4eeb68a6e596.jpeg

相关文章:

Python语言实现React框架

迷途小书童的 Note 读完需要 6分钟 速读仅需 2 分钟 1 reactpy 介绍 reactpy 是一个用 Python 语言实现的 ReactJS 框架。它可以让我们使用 Python 的方式来编写 React 的组件,构建用户界面。 reactpy 的目标是想要将 React 的优秀特性带入 Python 领域,…...

Netty入门学习和技术实践

Netty入门学习和技术实践 Netty1.Netty简介2.IO模型3.Netty框架介绍4. Netty实战项目学习5. Netty实际应用场景6.扩展 Netty 1.Netty简介 Netty是由JBOSS提供的一个java开源框架,现为 Github上的独立项目。Netty提供异步的、事件驱动的网络应用程序框架和工具&…...

MySQL详细安装与配置

免安装版的Mysql MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用于访问数据库的最常用的 标准化语言,其特点为体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,在 Web 应用方面 MySQL 是最好的 RDBMS(Relation…...

裸露土堆识别算法

裸露土堆识别算法首先利用图像处理技术,提取出图像中的土堆区域。裸露土堆识别算法首通过计算土堆中被绿色防尘网覆盖的比例,判断土堆是否裸露。若超过40%的土堆没有被绿色防尘网覆盖,则视为裸露土堆。当我们谈起计算机视觉时,首先…...

说说你对Redux的理解?其工作原理?

文章目录 redux?工作原理如何使用后言 redux? React是用于构建用户界面的,帮助我们解决渲染DOM的过程 而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state、组件之间的通信通…...

《基于 Vue 组件库 的 Webpack5 配置》7.路径别名 resolve.alias 和 性能 performance

路径别名 resolve.alias const path require(path);module.exports {resolve: {alias: {"": path.resolve(__dirname, "./src/"),"assets": path.resolve(__dirname, "./src/assets/"),"mixins": path.resolve(__dirname,…...

基于PaddleOCR2.7.0发布WebRest服务测试案例

基于PaddleOCR2.7.0发布WebRest服务测试案例 #WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. #警告:这是一个开发服务器。不要在生产部署中使用它。请改用生产WSGI服务器。 输出结果…...

Solidity 合约安全,常见漏洞 (下篇)

Solidity 合约安全,常见漏洞 (下篇) Solidity 合约安全,常见漏洞 (上篇) 不安全的随机数 目前不可能用区块链上的单一交易安全地产生随机数。区块链需要是完全确定的,否则分布式节点将无法达…...

nodejs根据pdf模板填入中文数据并生成新的pdf文件

导入pdf-lib库和fontkit npm install pdf-lib fs npm install pdf-lib/fontkit 具体代码 const { PDFDocument, StandardFonts } require(pdf-lib); const fs require(fs); const fontkit require(pdf-lib/fontkit) let pdfDoc let font async function fillPdfForm(temp…...

UE4与pycharm联合仿真的调试问题及一些仿真经验

文章目录 ue4与pycharm联合仿真的调试问题前言ue4端的debug过程pycharm端 一些仿真经验小结 ue4与pycharm联合仿真的调试问题 前言 因为在实验中我需要用到py代码输出控制信息给到ue4中,并且希望看到py端和ue端分别在运行过程中的输出以及debug调试。所以&#xf…...

【数据分析】波士顿矩阵

波士顿矩阵是一种用于分析市场定位和企业发展战略的管理工具。由美国波士顿咨询集团(Boston Consulting Group)于1970年提出,并以该集团命名。 波士顿矩阵主要基于产品生命周期和市场份额两个维度,将企业的产品或业务分为四个象限…...

sizeof和strlen的对比

文章目录 🚩前言🚩sizeof🚩strlen🚩sizeof和strlen对比 🚩前言 很多小白在学习中,经常将sizeof和strlen弄混了。本篇文章,小编讲解一下sizeof和strlen的区别。🤷‍♂️ &#x1f6a9…...

Flutter系列文章-Flutter 插件开发

在本篇文章中,我们将学习如何开发 Flutter 插件,实现 Flutter 与原生平台的交互。我们将详细介绍插件的开发过程,包括如何创建插件项目、实现方法通信、处理异步任务等。最后,我们还将演示如何将插件打包并发布到 Flutter 社区。 …...

基于SpringBoot实现MySQL与Redis的数据最终一致性

问题场景 在并发场景下,MySQL和Redis之间的数据不一致性可能成为一个突出问题。这种不一致性可能由网络延迟、并发写入冲突以及异常情况处理等因素引起,导致MySQL和Redis中的数据在某些时间点不同步或出现不一致的情况。数据一致性问题的级别可以分为三…...

mysql与oracle数据库备份

mysql 1在执行mysql数据备份前,可先执行命令查看磁盘容量: # df -h Filesystem Size Used Avail Use% Mounted on /dev/mapper/VolGroup-lv_root 50G 46G 1.6G 97% / tmpfs 1.9G 92K 1.9G 1% /dev/shm /dev/sda1 485M 39M 421M 9% /boot…...

UE4 材质学习笔记

CheapContrast与CheapContrast_RGB都是提升对比度的,一个是一维输入,一个是三维输入,让亮的地方更亮,暗的地方更暗,不像power虽然也是提升对比度,但是使用过后的结果都是变暗或者最多不变(值为1…...

TiDB 源码编译之 TiProxy 篇

作者: ShawnYan 原文来源: https://tidb.net/blog/3d57f54d TiProxy 简介 TiProxy 是一个基于 Apache 2.0 协议开源的、轻量级的 TiDB 数据库代理,基于 Go 语言编写,支持 MySQL 协议。 TiProxy 支持负载均衡,接收来…...

利用驱动漏洞

sbyt3/IObitUnlocker.Wrapper (github.com)...

开始MySQL之路——MySQL约束概述详解

MySQL约束 create table [if not exists] 表名(字段名1 类型[(宽度)] [约束条件] [comment 字段说明],字段名2 类型[(宽度)] [约束条件] [comment 字段说明],字段名3 类型[(宽度)] [约束条件] [comment 字段说明] )[表的一些设置]; 概念 约束英文:constraint 约束实…...

CMake基础和命令介绍

CMake是一个跨平台的构建工具,它可以生成各种不同平台上的构建文件,例如Makefile或Visual Studio项目文件。以下是一些常用的CMake命令: 1. cmake_minimum_required:指定需要的最小CMake版本。 2. project:定义项目名…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...

云计算——弹性云计算器(ECS)

弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则&#xf…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...