[2023.09.12]: Yew应用开发的第一个hook--use_state
Yew的SSR模式推荐使用function_component组件,并且在function_component中使用hooks。其中,我使用到的第一个hook是use_state。use_state的设计意图与React中的useState非常相似,都是为了保存并修改当前的状态。然而,由于Yew是用Rust语言实现的,所以在具体使用上还是有一些差异的。
我的代码如下:
mod components;
mod models;
use components::TableComponent;
use models::TableRow;
use yew::prelude::*;#[function_component]
fn Content() -> HtmlResult {let modalVisible = use_state(|| false);let onclick = {let modalVisible1 = modalVisible.clone();Callback::from(move |_| modalVisible1.set(!*modalVisible1))};let onclose = {let modalVisible1 = modalVisible.clone();Callback::from(move |_| modalVisible1.set(!*modalVisible1))};Ok(html! {<div class="column"><div class="section row content-end"><Button text={"新建"} {onclick} /></div><TableComponent data={data}/><Modal1 show={*modalVisible} {onclose}/></div>})}#[function_component]
pub fn App() -> Html {let fallback = html! {<div>{"Loading..."}</div>};html! {<Suspense {fallback}><Content /></Suspense>}
}
在讨论差异前,首先看use_state的声明
pub fn use_state<'hook, T, F>(init_fn: F
) -> impl 'hook + Hook<Output = UseStateHandle<T>>
whereT: 'static,F: FnOnce() -> T,T: 'hook,F: 'hook,
UseStateHandle<T>的方法比较多,关于取值和赋值的方法如下:
fn set(&self, value: T);
fn deref(&self) -> &Self::Target;
关于差异,限于我的使用经验,我这里先提出3个地方。
1. 赋初值
给state赋初值的是FnOnce,它是Rust中的一个trait(特征),用于表示可以调用一次的闭包(Closure)。
因此,上面的代码也可以这样写:
let init_data = || false;let modalVisible = use_state(init_data);
2. 状态读取
在上面的代码中,读取状态的代码如下:
<Modal1 show={*modalVisible} {onclose}/>
这个*号可以用deref()的方法来代替,这是因为UseStateHandle实现了core::ops::Deref trait。显然*使用更加方便,而且还不用显示引入core::ops::Deref;
需要注意的是,我们这里使用的是bool值,这种数据类型自动实现了Copy trait,因此,我们可以直接通过*modalVisible来使用它的值。如果是一个自定义的struct,那么这个struct要么也实现了Copy trait,要么实现了Clone trait。一般来说,我们可以直接通过#[derive(Clone)]来实现Clone trait,而实现Copy trait 则会比较麻烦。
因此,大多数情况,我们都会为struct实现Clone trait。所以,如果state是自定义的struct类型,我们要通过clone来获取它的值,例如\<TableComponent data={(*data).clone()}/>
在Reactjs中,直接通过解构useState的结果就可以拿到状态数据,相对简单得多呐。
3. 状态修改
使用set(&self, value: T) 方法来实现类似于React.js中的setXXX行为。但这里还是要提到clone()。
let onclick = {let modalVisible1 = modalVisible.clone();Callback::from(move |_| modalVisible1.set(!*modalVisible1))};let onclose = {let modalVisible1 = modalVisible.clone();Callback::from(move |_| modalVisible1.set(!*modalVisible1))};
我们在调用set方法之前,将modalVisible对象克隆了一份,否者会报所有权相关的错误。
另外,onclick和onclose这两段代码看似一样,但这两段代码在使用时有类型推断,因此如果复用onclick变量或者onclose变量,都会报类型错误。因此,还是要独立写成两份。这在ReactJs中是完全没有的事儿啊。
上面的内容比较粗浅。有不对的地方还希望大家多多指教。
相关文章:
[2023.09.12]: Yew应用开发的第一个hook--use_state
Yew的SSR模式推荐使用function_component组件,并且在function_component中使用hooks。其中,我使用到的第一个hook是use_state。use_state的设计意图与React中的useState非常相似,都是为了保存并修改当前的状态。然而,由于Yew是用R…...
使用Langchain+GPT+向量数据库chromadb 来创建文档对话机器人
使用LangchainGPT向量数据库chromadb 来创建文档对话机器人 一.效果图如下: 二.安装包 pip install langchainpip install chromadbpip install unstructuredpip install jieba三.代码如下 #!/usr/bin/python # -*- coding: UTF-8 -*-import os # 导入os模块&…...
Spring Cloud(Finchley版本)系列教程(一) 服务注册与发现(eureka)
Spring Cloud(Finchley版本)系列教程(一) 服务注册与发现(eureka) 为了更好的浏览体验,欢迎光顾勤奋的凯尔森同学个人博客http://www.huerpu.cc:7000 如有错误恳请大家批评指正,与大家共同学习、一起成长,万分感谢。 一、构建环境 Spring Cloud的构建工具可以使用Maven或Gr…...
【大数据】美团 DB 数据同步到数据仓库的架构与实践
美团 DB 数据同步到数据仓库的架构与实践 1.背景2.整体架构3.Binlog 实时采集4.离线还原 MySQL 数据5.Kafka2Hive6.对 Camus 的二次开发7.Checkdone 的检测逻辑8.Merge9.Merge 流程举例10.实践一:分库分表的支持11.实践二:删除事件的支持12.总结与展望 1…...
分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测
分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测 目录 分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.Matlab实现WOA-CNN-BiGRU多特征分类…...
mac使用squidMan设置代理服务器
1,下载squidMan http://squidman.net/squidman/ 2, 配置SquidMan->Preference 3, mac命令窗口配置 export http_proxy export https_porxy 4,客户端配置(centos虚拟机) export http_proxyhttp://服务器ip:8080 export https…...
大数据Flink(七十八):SQL 的水印操作(Watermark)
文章目录 SQL 的水印操作(Watermark) 一、为什么要有 WaterMark...
【Linux】Qt Remote之Remote开发环境搭建填坑小记
总体思路 基于WSL2(Ubuntu 22.04 LTS)原子Alpha开发板进行Qt开发实验,基于Win11通过vscode remote到WSL2,再基于WSL2通过Qt 交叉编译,并通过sshrsync远程到开发板,构建起开发工具链。 Step1 基于Win11通过…...
ATFX汇市:离岸人民币大幅升值,昨日盘中跌破7.3关口
ATFX汇市:美国CPI数据即将公布之际,周一美元指数大跌,带动离岸人民币升值0.85%,实现3月14日以来的最大单日升值幅度,当日汇率(USDCNH)最低触及7.292,突破7.3000关口。消息面上&#…...
Spring Boot 配置 Knife4j
一、引入 maven <!-- 引入 knife4j 文档--> <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-openapi2-spring-boot-starter</artifactId> <version>4.1.0</version> </dependency>二…...
Java项目中遇到uv坐标如何转换成经纬度坐标
将UV坐标(通常指平面坐标,如二维地图坐标)转换为经纬度坐标(地理坐标)通常需要知道一个参考点的经纬度坐标,以及两者之间的比例关系。这是因为UV坐标通常用于在地图上绘制图形或标记点,而经纬度…...
std : : unordered_map 、 std : : unordered_set
一.简介 std::unordered_map 是C标准库中的一种关联容器,它提供了一种用于存储键-值对的数据结构,其中键是唯一的,且不会按特定顺序排序。与 std::map 不同,std::unordered_map 使用哈希表作为其底层数据结构,因此它具…...
Python解释器和Pycharm的傻瓜式安装部署
给我家憨憨写的python教程 有惊喜等你找噢 ——雁丘 Python解释器Pycharm的安装部署 关于本专栏一 Python解释器1.1 使用命令提示符编写Python程序1.2 用记事本编写Python程序 二 Pycharm的安装三 Pycharm的部署四 Pycharm基础使用技巧4.1 修改主题颜色4.2 修改字体4.3 快速修…...
14 Python使用网络
概述 在上一节,我们介绍了如何在Python中使用Json,包括:Json序列化、Json反序列化、读Json文件、写Json文件、将类对象转换为Json、将Json转换为类对象等内容。在这一节,我们将介绍如何在Python中使用网络。Python网络编程覆盖的范…...
AI ChatGPT 各大开放平台一览 大模型 Prompt
AI ChatGPT 各大开放平台一览 大模型 Prompt 国内 百度 ERNIE Bot 文心一言阿里巴巴 通义千问腾讯 Hunyuan BOT 混元 (暂未发布)华为 盘古旷视 ChatSpot科大讯飞 讯飞星火网易 子曰(暂未发布)京东 言犀奇安信 Q-GPT商汤科技 商量S…...
全球汽车安全气囊芯片总体规模分析
安全气囊系统是一种被动安全性的保护系统,它与座椅安全带配合使用,可以为乘员提供有效的防撞保护。在汽车相撞时,汽车安全气囊可使头部受伤率减少25%,面部受伤率减少80%左右。 汽车安全气囊芯片是整个系统的控制核心,并…...
USB适配器应用芯片 国产GP232RL软硬件兼容替代FT232RL DPU02直接替代CP2102
USB适配器,是英文Universal Serial Bus(通用串行总线)的缩写,而其中文简称为“通串线”,是一个外部总线标准,用于规范电脑与外部设备的连接和通讯。是应用在PC领域的接口技术, 移动PC由于没有电池,电源适配…...
卫星物联网生态建设全面加速,如何抓住机遇?
当前,卫星通信无疑是行业最热门的话题之一。近期发布的华为Mate 60 Pro“向上捅破天”技术再次升级,成为全球首款支持卫星通话的大众智能手机,支持拨打和接听卫星电话,还可自由编辑卫星消息。 据悉,华为手机的卫星通话…...
SAP GUI 8.0 SMARTFORMS 使用SCR LEGACY TEXT EDITOR GUI8.00 禁用MSWORD
Smartforms使用WORD作为编辑器是很痛苦的一个事情,不支持拖拽,还很慢,各种不习惯,总之是非常的不舒服,能导致失眠。 在S/4以前的系统,可以使用TCODE I18N或者程序RSCPSETEDITOR或者暴力党直接改表TCP0I来…...
【SpringMVC】JSR303与拦截器的使用
文章目录 一、JSR3031.1 JSR303是什么1.2 JSR 303的好处包括1.3 常用注解1.4 实例1.4.1 导入JSR303依赖1.4.2 规则配置1.4.3 编写校验方法1.4.4 编写前端 二、拦截器2.1 拦截器是什么2.2 拦截器与过滤器的区别2.3.应用场景2.4 快速入门2.5.拦截器链2.6 登录拦截权限案例2.6.1 L…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
