哈尔滨网站建设工作,手机网站微信咨询,网页快速收录,触屏网页界面设计Yew的SSR模式推荐使用function_component组件#xff0c;并且在function_component中使用hooks。其中#xff0c;我使用到的第一个hook是use_state。use_state的设计意图与React中的useState非常相似#xff0c;都是为了保存并修改当前的状态。然而#xff0c;由于Yew是用R…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 classcolumndiv classsection row content-endButton text{新建} {onclick} //divTableComponent 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_statehook, T, F(init_fn: F
) - impl hook HookOutput UseStateHandleT
whereT: static,F: FnOnce() - T,T: hook,F: hook,UseStateHandleT的方法比较多关于取值和赋值的方法如下
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中是完全没有的事儿啊。
上面的内容比较粗浅。有不对的地方还希望大家多多指教。
