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
- 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. 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.
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:
<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.
Behind the scenes, Html
is just an alias for VNode
- a virtual node.