[2023.09.12]: Yew应用开发的第一个hook--use_state

Yew的SSR模式推荐使用function_component组件,并且在function_component中使用hooks。其中,我使用到的第一个hook是use_state。use_state的设计意图与React中的useState非常相似,都是为了保存并修改当前的状态。然而,由于Yew是用Rust语言实现的,所以在具体使用上还是有一些差异的。

我的代码如下:

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的声明

rust 复制代码
pub fn use_state<'hook, T, F>(
    init_fn: F
) -> impl 'hook + Hook<Output = UseStateHandle<T>>
where
    T: 'static,
    F: FnOnce() -> T,
    T: 'hook,
    F: 'hook,

UseStateHandle<T>的方法比较多,关于取值和赋值的方法如下:

rust 复制代码
fn set(&self, value: T);
fn deref(&self) -> &Self::Target;

关于差异,限于我的使用经验,我这里先提出3个地方。

1. 赋初值

给state赋初值的是FnOnce,它是Rust中的一个trait(特征),用于表示可以调用一次的闭包(Closure)。

因此,上面的代码也可以这样写:

rust 复制代码
    let init_data = || false;
    let modalVisible = use_state(init_data);

2. 状态读取

在上面的代码中,读取状态的代码如下:

rust 复制代码
<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()

rust 复制代码
    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中是完全没有的事儿啊。

上面的内容比较粗浅。有不对的地方还希望大家多多指教。

相关推荐
q56731523几秒前
R语言初学者爬虫简单模板
开发语言·爬虫·r语言·iphone
万少24 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL30 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说1 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref