Skip to main content
Version: Next

函数式组件

函数式组件是普通组件的简化版本。它们由一个接收 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。您也可以创建自己的。