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

[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组件&#xff0c;并且在function_component中使用hooks。其中&#xff0c;我使用到的第一个hook是use_state。use_state的设计意图与React中的useState非常相似&#xff0c;都是为了保存并修改当前的状态。然而&#xff0c;由于Yew是用R…...

使用Langchain+GPT+向量数据库chromadb 来创建文档对话机器人

使用LangchainGPT向量数据库chromadb 来创建文档对话机器人 一.效果图如下&#xff1a; 二.安装包 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.实践一&#xff1a;分库分表的支持11.实践二&#xff1a;删除事件的支持12.总结与展望 1…...

分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测

分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测 目录 分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.Matlab实现WOA-CNN-BiGRU多特征分类…...

mac使用squidMan设置代理服务器

1&#xff0c;下载squidMan http://squidman.net/squidman/ 2, 配置SquidMan->Preference 3, mac命令窗口配置 export http_proxy export https_porxy 4&#xff0c;客户端配置&#xff08;centos虚拟机&#xff09; export http_proxyhttp://服务器ip:8080 export https…...

大数据Flink(七十八):SQL 的水印操作(Watermark)

文章目录 SQL 的水印操作(Watermark) 一、为什么要有 WaterMark...

【Linux】Qt Remote之Remote开发环境搭建填坑小记

总体思路 基于WSL2&#xff08;Ubuntu 22.04 LTS&#xff09;原子Alpha开发板进行Qt开发实验&#xff0c;基于Win11通过vscode remote到WSL2&#xff0c;再基于WSL2通过Qt 交叉编译&#xff0c;并通过sshrsync远程到开发板&#xff0c;构建起开发工具链。 Step1 基于Win11通过…...

ATFX汇市:离岸人民币大幅升值,昨日盘中跌破7.3关口

ATFX汇市&#xff1a;美国CPI数据即将公布之际&#xff0c;周一美元指数大跌&#xff0c;带动离岸人民币升值0.85%&#xff0c;实现3月14日以来的最大单日升值幅度&#xff0c;当日汇率&#xff08;USDCNH&#xff09;最低触及7.292&#xff0c;突破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坐标&#xff08;通常指平面坐标&#xff0c;如二维地图坐标&#xff09;转换为经纬度坐标&#xff08;地理坐标&#xff09;通常需要知道一个参考点的经纬度坐标&#xff0c;以及两者之间的比例关系。这是因为UV坐标通常用于在地图上绘制图形或标记点&#xff0c;而经纬度…...

std : : unordered_map 、 std : : unordered_set

一.简介 std::unordered_map 是C标准库中的一种关联容器&#xff0c;它提供了一种用于存储键-值对的数据结构&#xff0c;其中键是唯一的&#xff0c;且不会按特定顺序排序。与 std::map 不同&#xff0c;std::unordered_map 使用哈希表作为其底层数据结构&#xff0c;因此它具…...

Python解释器和Pycharm的傻瓜式安装部署

给我家憨憨写的python教程 有惊喜等你找噢 ——雁丘 Python解释器Pycharm的安装部署 关于本专栏一 Python解释器1.1 使用命令提示符编写Python程序1.2 用记事本编写Python程序 二 Pycharm的安装三 Pycharm的部署四 Pycharm基础使用技巧4.1 修改主题颜色4.2 修改字体4.3 快速修…...

14 Python使用网络

概述 在上一节&#xff0c;我们介绍了如何在Python中使用Json&#xff0c;包括&#xff1a;Json序列化、Json反序列化、读Json文件、写Json文件、将类对象转换为Json、将Json转换为类对象等内容。在这一节&#xff0c;我们将介绍如何在Python中使用网络。Python网络编程覆盖的范…...

AI ChatGPT 各大开放平台一览 大模型 Prompt

AI ChatGPT 各大开放平台一览 大模型 Prompt 国内 百度 ERNIE Bot 文心一言阿里巴巴 通义千问腾讯 Hunyuan BOT 混元 &#xff08;暂未发布&#xff09;华为 盘古旷视 ChatSpot科大讯飞 讯飞星火网易 子曰&#xff08;暂未发布&#xff09;京东 言犀奇安信 Q-GPT商汤科技 商量S…...

全球汽车安全气囊芯片总体规模分析

安全气囊系统是一种被动安全性的保护系统&#xff0c;它与座椅安全带配合使用&#xff0c;可以为乘员提供有效的防撞保护。在汽车相撞时&#xff0c;汽车安全气囊可使头部受伤率减少25%&#xff0c;面部受伤率减少80%左右。 汽车安全气囊芯片是整个系统的控制核心&#xff0c;并…...

USB适配器应用芯片 国产GP232RL软硬件兼容替代FT232RL DPU02直接替代CP2102

USB适配器&#xff0c;是英文Universal Serial Bus(通用串行总线)的缩写&#xff0c;而其中文简称为“通串线”&#xff0c;是一个外部总线标准&#xff0c;用于规范电脑与外部设备的连接和通讯。是应用在PC领域的接口技术&#xff0c; 移动PC由于没有电池&#xff0c;电源适配…...

卫星物联网生态建设全面加速,如何抓住机遇?

当前&#xff0c;卫星通信无疑是行业最热门的话题之一。近期发布的华为Mate 60 Pro“向上捅破天”技术再次升级&#xff0c;成为全球首款支持卫星通话的大众智能手机&#xff0c;支持拨打和接听卫星电话&#xff0c;还可自由编辑卫星消息。 据悉&#xff0c;华为手机的卫星通话…...

SAP GUI 8.0 SMARTFORMS 使用SCR LEGACY TEXT EDITOR GUI8.00 禁用MSWORD

Smartforms使用WORD作为编辑器是很痛苦的一个事情&#xff0c;不支持拖拽&#xff0c;还很慢&#xff0c;各种不习惯&#xff0c;总之是非常的不舒服&#xff0c;能导致失眠。 在S/4以前的系统&#xff0c;可以使用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…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

作为点的对象CenterNet论文阅读

摘要 检测器将图像中的物体表示为轴对齐的边界框。大多数成功的目标检测方法都会枚举几乎完整的潜在目标位置列表&#xff0c;并对每一个位置进行分类。这种做法既浪费又低效&#xff0c;并且需要额外的后处理。在本文中&#xff0c;我们采取了不同的方法。我们将物体建模为单…...

二维数组 行列混淆区分 js

二维数组定义 行 row&#xff1a;是“横着的一整行” 列 column&#xff1a;是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示 第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示 第i行第j列的…...

【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解

Nginx 是什么&#xff1a;高性能的HTTP和反向代理Web服务器。怎么用&#xff1a;通过配置文件定义代理规则、负载均衡、静态资源服务等。为什么用&#xff1a;提升Web服务性能、高并发处理、负载均衡和反向代理。优缺点&#xff1a;轻量高效&#xff0c;但动态处理能力较弱&am…...