Introduction

组件是什么？

组件是 Yew 的基石。它们管理自己的状态，并可以渲染为 DOM。组件是通过实现描述组件生命周期的 Component trait 来创建的。

生命周期

Introduction - 图1

contribute

为我们的文档做出贡献：添加组件的生命周期图示

生命周期方法

Create

当一个组件被创建时，它会从其父组件以及一个 ComponentLink 接收属性（properties）。属性（properties）可用于初始化组件的状态，“link”可用于注册回调或向组件发送消息。

通常将 props 和 link 存储在组件的结构体中，如下所示：

1. pub struct MyComponent {
2. props: Props,
3. link: ComponentLink<Self>,
4. }

6. impl Component for MyComponent {
7. type Properties = Props;
8. // ...

10. fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
11. MyComponent { props, link }
12. }

14. // ...
15. }

View

组件在 view() 方法中声明它的布局。Yew 提供了 html! 宏来声明 HTML 和 SVG 节点和它们的监听器及其子组件。这个宏的行为很像 React 中的 JSX，但是使用的是 Rust 表达式而不是 JavaScript。

1. impl Component for MyComponent {
2. // ...

4. fn view(&self) -> Html {
5. let onclick = self.link.callback(|_| Msg::Click);
6. html! {
7. <button onclick=onclick>{ self.props.button_text }</button>
8. }
9. }
10. }

有关用法的详细信息，请查看 html! 宏指南。

Rendered

rendered() 组件生命周期方法的调用时机是在 view() 被处理并且 Yew 已经渲染了你的组件，但浏览器还未刷新页面的时候。组件通常希望实现此方法以执行只能在组件渲染元素之后才能执行的操作。你可以通过 first_render 参数，来检查当前组件是否为第一次渲染。

1. use stdweb::web::html_element::InputElement;
2. use stdweb::web::IHtmlElement;
3. use yew::prelude::*;

5. pub struct MyComponent {
6. node_ref: NodeRef,
7. }

9. impl Component for MyComponent {
10. // ...

12. fn view(&self) -> Html {
13. html! {
14. <input ref=self.node_ref.clone() type="text" />
15. }
16. }

18. fn rendered(&mut self, first_render: bool) {
19. if first_render {
20. if let Some(input) = self.node_ref.cast::<InputElement>() {
21. input.focus();
22. }
23. }
24. }
25. }

Introduction - 图2

note

请注意，可以不实现此生命周期方法，默认情况下不会执行任何操作。

Update

组件是动态的，可以注册以接收异步信息。update() 生命周期方法对于每个消息都会被调用。这使得组件可以根据消息的内容来更新自身，并决定是否需要重新渲染自己。消息可以由 HTML 元素监听器触发，或者由子组件，Agents，Services 或 Futures 发送。

update() 可能看起来像下面这个例子：

1. pub enum Msg {
2. SetInputEnabled(bool)
3. }

5. impl Component for MyComponent {
6. type Message = Msg;

8. // ...

10. fn update(&mut self, msg: Self::Message) -> ShouldRender {
11. match msg {
12. Msg::SetInputEnabled(enabled) => {
13. if self.input_enabled != enabled {
14. self.input_enabled = enabled;
15. true // 重新渲染
16. } else {
17. false
18. }
19. }
20. }
21. }
22. }

Change

组件可能被其父节点重新渲染。此时，它们可以接收新的属性（properties）并选择重新渲染。这种设计通过更改属性（properties）简化了父子组件之间的通信。

一个典型的实现可能看起来像：

1. impl Component for MyComponent {
2. // ...

4. fn change(&mut self, props: Self::Properties) -> ShouldRender {
5. if self.props != props {
6. self.props = props;
7. true
8. } else {
9. false
10. }
11. }
12. }

Destroy

组件从 DOM 上被卸载后，Yew 调用 destroy() 生命周期方法来支持任何必要的清理操作。这个方法是可选的，默认情况下不执行任何操作。

关联类型

Component trait 有两个关联类型：Message 和 Properties。

1. impl Component for MyComponent {
2. type Message = Msg;
3. type Properties = Props;

5. // ...
6. }

Message 指的是那些可以被组件用来触发某些副作用的消息。例如，你可能有一条 Click 消息，该消息触发 API 请求或者切换 UI 组件的外观。通常的做法是在组件模块中创建一个叫做 Msg 的枚举并将其用作组件中的消息类型。通常将“message”缩写为“msg”。

1. enum Msg {
2. Click,
3. }

Properties 表示从父级传递到组件的信息。此类型必须实现 Properties trait（通常通过派生），并且可以指定某些属性（properties）是必需的还是可选的。此类型用在创建和更新组件时。通常的做法是在组件模块中创建一个叫做 Props 的结构体并将其用作组件的 Properties 类型。通常将“properties”缩写为“props”。由于 props 是从父组件传递下来的，因此应用程序的根组件通常有一个类型为 () 的 Properties。如果你希望为根组件指定属性（properties），请使用 App::mount_with_props 方法。