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>>
where
T: '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中是完全没有的事儿啊。
上面的内容比较粗浅。有不对的地方还希望大家多多指教。
