Skip to main content
Version: 0.20

函数式组件

函数式组件是普通组件的简化版本。它们由一个接收 props 的函数组成，并通过返回Html来确定应该呈现什么。基本上，它是一个简化为view方法的组件。就其本身而言，这将是相当有限的，因为您只能创建纯组件，而这就是 Hook 大展身手的地方。Hook 允许函数组件无需实现Component trait，就可以使用状态（state）和其他 Yew 功能。

创建函数式组件​

创建函数式组件的最简单方法是在函数前添加#[function_component]属性。

#[function_component(HelloWorld)]
fn hello_world() -> Html {
    html! { "Hello world" }
}

更多细节​

函数式组件由两部分组成。首先， FunctionProvider trait 与Component trait 差不多，但它只有一个名为run方法。之后是FunctionComponent结构体，它封装了FunctionProvider类型并将其转换为实际的Component 。 #[function_component]属性本质上只是FunctionProvider并将其暴露在FunctionComponent 。

钩子（Hooks）​

钩子（Hooks）就是让您“钩住”组件的状态（state）和/或生命周期并执行操作的函数。 除了 Yew 自带的一些预定义的 Hook。您也可以创建自己的。