[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中是完全没有的事儿啊。

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

相关推荐
excel3 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着3 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23337 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin7 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js