メインコンテンツまでスキップ
Version: Next

関数コンポーネント

以前のスローガンをもう一度見てみましょう：

Yew の核心思想は、再利用可能な UI 部分に必要なすべての内容を 1 つの場所 - Rust ファイルに集中させることです。

この声明を完成させるために、アプリケーションのロジックとレンダリングの動作を定義する概念を導入します："コンポーネント"。

コンポーネントとは？​

コンポーネントは Yew の構成要素です。

それらは次のことを行うべきです：

  • Props の形式でパラメータを受け取る
  • 独自の状態を持つことができる
  • ユーザーに見える HTML フラグメント（DOM）を計算する

Yew コンポーネントの 2 つのフレーバー​

現在、関数コンポーネントについて読んでいます - これは Yew を使い始めるときや、シンプルなレンダリングロジックを書くときにコンポーネントを書くための推奨方法です。

もう一つの、より高度ですがアクセスしにくいコンポーネントの書き方があります - 構造コンポーネント。それらは非常に詳細な制御を可能にしますが、ほとんどの場合、そこまで詳細な制御は必要ありません。

関数コンポーネントの作成​

関数コンポーネントを作成するには、関数に #[function_component] 属性を追加します。慣例として、関数の名前は PascalCase を使用し、html! マクロ内の通常の html 要素と対比させます。

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

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

// そして他の場所で、`html!` 内でコンポーネントを使用できます
#[function_component]
fn App() -> Html {
    html! { <HelloWorld /> }
}

コンポーネント内部で何が起こっているのか​

レンダリング時に、Yew はこれらのコンポーネントの仮想ツリーを構築します。各（関数）コンポーネントの view 関数を呼び出して、DOM の仮想バージョン（VDOM）を計算します。ライブラリのユーザーとして、これを Html 型として扱います。上記の例では、次のようになります：

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

更新が必要な場合、Yew は再び view 関数を呼び出し、新しい仮想 DOM を以前のバージョンと調整し、新しい/変更された/必要な部分のみを実際の DOM に伝播します。これが レンダリング と呼ばれるものです。

note

実際には、Html は VNode の別名に過ぎません - 仮想ノードです。