杭州专业网站建设seo免费诊断电话
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中是完全没有的事儿啊。
上面的内容比较粗浅。有不对的地方还希望大家多多指教。