当前位置: 首页 > 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…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...