函數元件

讓我們重新檢視這個先前的陳述

Yew 的核心運作方式在於將重複使用的 UI 所需要的所有內容集中在單一位置，也就是 Rust 檔案。

我們將透過介紹定義應用程式邏輯和表示行為的概念：「元件」來完善這項陳述。

元件是什麼？

元件是 Yew 的建構模組。

它們

• 以 屬性 的形式接收引數
• 可以擁有它們自己的狀態
• 計算使用者可見的 HTML 內容（DOM）

兩種 Yew 元件類型

你目前正在閱讀關於函數元件的文章，這是開始使用 Yew 撰寫元件以及撰寫簡單表示邏輯時建議的方法。

有更進階但較難入門的方法來撰寫元件 - struct 元件。它們允許極其細部的控制，儘管大部分時間你都不需要這麼細部。

建立函式元件

若要建立函式元件，請將 #[function_component] 屬性新增到一個函數中。依慣例，函數會使用 PascalCase 命名，就像所有元件一樣，以區別此函數於 html! 巨集內部中一般 html 元素的用途。

use yew::{function_component, html, Html};

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

// Then somewhere else you can use the component inside `html!`
#[function_component]
fn App() -> Html {
    html! { <HelloWorld /> }
}

元件會發生什麼事

在渲染時，Yew 會建立這些元件的虛擬樹。它會呼叫每個（函式）元件的檢視函數來計算你作為函式庫使用者在 Html 類型中所看到的 DOM 的虛擬版本（VDOM）。以下一個範例來說，會看起來像這樣

<App>
  <HelloWorld>
    <p>"Hello world"</p>
  </HelloWord>
</App>

當需要更新時，Yew 會再次呼叫檢視函數，並將新的虛擬 DOM 與先前的版本進行調整，僅將新／已變更／必要的部份傳播到實際 DOM。這就是我們所說的渲染。

備註

在幕後，Html 只是 VNode 的別名 - 一個虛擬節點。