メインコンテンツへスキップ
バージョン: 0.21

関数コンポーネント

以前のこの記述を再検討してみましょう

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" }
}

// 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（仮想ノード）のエイリアスです。