mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
5e823e729d
* Update CHANGELOG Changelog run: https://github.com/yewstack/yew/actions/runs/6283917852/job/17064800916 * docusaurus docs:version 0.21 * migration guide * blog post * prettier * make website warnings go away * make GA work * Apply suggestions from code review * Apply suggestion from review Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com> * prettier --------- Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com>
77 lines
2.2 KiB
Plaintext
77 lines
2.2 KiB
Plaintext
---
|
|
title: 'Function Components'
|
|
slug: /concepts/function-components
|
|
---
|
|
|
|
Let's revisit this previous statement:
|
|
|
|
> Yew centrally operates on the idea of keeping everything that a reusable piece of
|
|
> UI may need in one place - rust files.
|
|
|
|
We will refine this statement, by introducing the concept that will define the logic and
|
|
presentation behavior of an application: "components".
|
|
|
|
## What are Components?
|
|
|
|
Components are the building blocks of Yew.
|
|
|
|
They:
|
|
|
|
- Take arguments in form of [Props](./properties.mdx)
|
|
- Can have their own state
|
|
- Compute pieces of HTML visible to the user (DOM)
|
|
|
|
## Two flavors of Yew Components
|
|
|
|
You are currently reading about function components - the recommended way to write components
|
|
when starting with Yew and when writing simple presentation logic.
|
|
|
|
There is a more advanced, but less accessible, way to write components - [Struct components](advanced-topics/struct-components/introduction.mdx).
|
|
They allow very detailed control, though you will not need that level of detail most of the time.
|
|
|
|
## Creating function components
|
|
|
|
To create a function component add the `#[function_component]` attribute to a function.
|
|
By convention, the function is named in PascalCase, like all components, to contrast its
|
|
use to normal html elements inside the `html!` macro.
|
|
|
|
```rust
|
|
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 /> }
|
|
}
|
|
```
|
|
|
|
## What happens to components
|
|
|
|
When rendering, Yew will build a virtual tree of these components.
|
|
It will call the view function of each (function) component to compute a virtual version (VDOM) of the DOM
|
|
that you as the library user see as the `Html` type.
|
|
For the previous example, this would look like this:
|
|
|
|
```xhtml
|
|
<App>
|
|
<HelloWorld>
|
|
<p>"Hello world"</p>
|
|
</HelloWord>
|
|
</App>
|
|
```
|
|
|
|
When an update is necessary, Yew will again call the view function and reconcile the new virtual DOM with its
|
|
previous version and only propagate the new/changed/necessary parts to the actual DOM.
|
|
This is what we call **rendering**.
|
|
|
|
:::note
|
|
|
|
Behind the scenes, `Html` is just an alias for `VNode` - a virtual node.
|
|
|
|
:::
|