mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
90b4e55ebc
* change suffixes from md to mdx fix broken links for English locale tree shake and update docusaurus add docusaurus ideal image plugin use svg and themed image delete unused static asset * move localized landing page * change GitLocalize project page * nit pick * remove ignore to have the block checked
197 lines
7.1 KiB
Plaintext
197 lines
7.1 KiB
Plaintext
---
|
||
title: Introduction
|
||
description: Components and their lifecycle hooks
|
||
---
|
||
## コンポーネントとは?
|
||
|
||
コンポーネントはYewを構成するブロックです。
|
||
コンポーネントは状態を管理し、自身をDOMへレンダリングすることができます。
|
||
コンポーネントはライフサイクルの機能がある`Component`トレイトを実装することによって作られます。
|
||
|
||
## ライフサイクル
|
||
|
||
:::important contribute
|
||
`Contribute to our docs:` [Add a diagram of the component lifecycle](https://github.com/yewstack/docs/issues/22)
|
||
:::
|
||
|
||
## ライフサイクルのメソッド
|
||
|
||
### Create
|
||
|
||
コンポーネントが作られると、`ComponentLink`と同様に親コンポーネントからプロパティを受け取ります。
|
||
プロパティはコンポーネントの状態を初期化するのに使われ、"link"はコールバックを登録したりコンポーネントにメッセージを送るのに使われます。
|
||
|
||
propsとlinkをコンポーネント構造体に格納するのが一般的です。
|
||
例えば:
|
||
|
||
```rust
|
||
pub struct MyComponent {
|
||
props: Props,
|
||
link: ComponentLink<Self>,
|
||
}
|
||
|
||
impl Component for MyComponent {
|
||
type Properties = Props;
|
||
// ...
|
||
|
||
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||
MyComponent { props, link }
|
||
}
|
||
|
||
// ...
|
||
}
|
||
```
|
||
|
||
### View
|
||
|
||
コンポーネントは`view()`メソッドによってレイアウトを宣言します。
|
||
Yewは`html!`マクロによってHTMLとSVGノード、リスナー、子コンポーネントを宣言できます。
|
||
マクロはReactのJSXのような動きをしますが、JavaScriptの代わりにRustの式を用います。
|
||
|
||
```rust
|
||
impl Component for MyComponent {
|
||
// ...
|
||
|
||
fn view(&self) -> Html {
|
||
let onclick = self.link.callback(|_| Msg::Click);
|
||
html! {
|
||
<button {onclick}>{ self.props.button_text }</button>
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
使い方については[`html!`ガイド](html.md)をご確認ください。
|
||
|
||
### Rendered
|
||
|
||
`rendered()`コンポーネントのライフサイクルのメソッドは`view()`が処理されたてYewがコンポーネントをレンダリングした後、
|
||
ブラウザがページを更新する前に呼ばれます。
|
||
コンポーネントは、コンポーネントが要素をレンダリングした後にのみ実行できるアクションを実行するため、このメソッドを実装したい場合があります。
|
||
コンポーネントが初めてレンダリングされたかどうかは `first_render` パラメータで確認できます。
|
||
|
||
```rust
|
||
use stdweb::web::html_element::InputElement;
|
||
use stdweb::web::IHtmlElement;
|
||
use yew::prelude::*;
|
||
|
||
pub struct MyComponent {
|
||
node_ref: NodeRef,
|
||
}
|
||
|
||
impl Component for MyComponent {
|
||
// ...
|
||
|
||
fn view(&self) -> Html {
|
||
html! {
|
||
<input ref={self.node_ref.clone()} type="text" />
|
||
}
|
||
}
|
||
|
||
fn rendered(&mut self, first_render: bool) {
|
||
if first_render {
|
||
if let Some(input) = self.node_ref.try_into::<InputElement>() {
|
||
input.focus();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
:::tip note
|
||
ライフサイクルメソッドは実装の必要がなく、デフォルトでは何もしません。
|
||
:::
|
||
|
||
### Update
|
||
|
||
コンポーネントは動的で、非同期メッセージを受信するために登録することができます。
|
||
ライフサイクルメソッド `update()` はメッセージごとに呼び出されます。
|
||
これにより、コンポーネントはメッセージが何であったかに基づいて自身を更新し、自身を再レンダリングする必要があるかどうかを判断することができます。
|
||
メッセージは、HTML要素リスナーによってトリガーされたり、子コンポーネント、エージェント、サービス、またはFuturesによって送信されたりします。
|
||
|
||
`update()`がどのようなのかについての例は以下の通りです:
|
||
|
||
```rust
|
||
pub enum Msg {
|
||
SetInputEnabled(bool)
|
||
}
|
||
|
||
impl Component for MyComponent {
|
||
type Message = Msg;
|
||
|
||
// ...
|
||
|
||
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
||
match msg {
|
||
Msg::SetInputEnabled(enabled) => {
|
||
if self.input_enabled != enabled {
|
||
self.input_enabled = enabled;
|
||
true // Re-render
|
||
} else {
|
||
false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### Change
|
||
|
||
コンポーネントは親によって再レンダリングされることがあります。
|
||
このような場合、新しいプロパティを受け取り、再レンダリングを選択する可能性があります。
|
||
この設計では、プロパティを変更することで、親から子へのコンポーネントの通信が容易になります。
|
||
|
||
典型的な実装例は以下の通りです:
|
||
|
||
```rust
|
||
impl Component for MyComponent {
|
||
// ...
|
||
|
||
fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
||
if self.props != props {
|
||
self.props = props;
|
||
true
|
||
} else {
|
||
false
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### Destroy
|
||
|
||
コンポーネントが DOM からアンマウントされた後、Yew は `destroy()` ライフサイクルメソッドを呼び出し、必要なクリーンアップ操作をサポートします。
|
||
このメソッドはオプションで、デフォルトでは何もしません。
|
||
|
||
## Associated Types
|
||
|
||
`Component`トレイトは2つの関連型があります: `Message`と`Properties`です。
|
||
|
||
```rust
|
||
impl Component for MyComponent {
|
||
type Message = Msg;
|
||
type Properties = Props;
|
||
|
||
// ...
|
||
}
|
||
```
|
||
|
||
`Message`はコンポーネントによって処理され、何らかの副作用を引き起こすことができるさまざまなメッセージを表します。
|
||
例えば、APIリクエストをトリガーしたり、UIコンポーネントの外観を切り替えたりする `Click` メッセージがあります。
|
||
コンポーネントのモジュールで `Msg` という名前の列挙型を作成し、それをコンポーネントのメッセージ型として使用するのが一般的です。
|
||
"message"を"msg"と省略するのも一般的です。
|
||
|
||
```rust
|
||
enum Msg {
|
||
Click,
|
||
}
|
||
```
|
||
|
||
`Properties`は、親からコンポーネントに渡される情報を表します。
|
||
この型はProperties traitを実装していなければならず\(通常はこれを派生させることで\)、特定のプロパティが必須かオプションかを指定することができます。
|
||
この型は、コンポーネントの作成・更新時に使用されます。
|
||
コンポーネントのモジュール内に `Props` という構造体を作成し、それをコンポーネントの `Properties` 型として使用するのが一般的です。
|
||
”Properties”を"props"に短縮するのが一般的です。
|
||
Propsは親コンポーネントから継承されるので、アプリケーションのルートコンポーネントは通常`()`型の`Properties`を持ちます。
|
||
ルートコンポーネントのプロパティを指定したい場合は、`App::mount_with_props`メソッドを利用します。 |