当前位置: 首页 > 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:定义项目名…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...

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>…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...