Trait Component

pub trait Component: Sized + 'static {
    type Message: 'static;
    type Properties: Properties;

    // Required methods
    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self;
    fn update(&mut self, msg: Self::Message) -> ShouldRender;
    fn change(&mut self, _props: Self::Properties) -> ShouldRender;
    fn view(&self) -> Html;

    // Provided methods
    fn rendered(&mut self, _first_render: bool) { ... }
    fn destroy(&mut self) { ... }
}

Components are the basic building blocks of the UI in a Yew app. Each Component chooses how to display itself using received props and self-managed state. Components can be dynamic and interactive by declaring messages that are triggered and handled asynchronously. This async update mechanism is inspired by Elm and the actor model used in the Actix framework.

Required Associated Types

type Message: 'static

Messages are used to make Components dynamic and interactive. Simple Component’s can declare their Message type to be (). Complex Component’s commonly use an enum to declare multiple Message types.

type Properties: Properties

Properties are the inputs to a Component and should not mutated within a Component. They are passed to a Component using a JSX-style syntax.

html! {
    <Model prop="value" />
}

Required Methods

fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self

Components are created with their properties as well as a ComponentLink which can be used to send messages and create callbacks for triggering updates.

fn update(&mut self, msg: Self::Message) -> ShouldRender

Components handle messages in their update method and commonly use this method to update their state and (optionally) re-render themselves.

fn change(&mut self, _props: Self::Properties) -> ShouldRender

When the parent of a Component is re-rendered, it will either be re-created or receive new properties in the change lifecycle method. Component’s can choose to re-render if the new properties are different than the previously received properties. Most Component’s will use props with a PartialEq impl and will be implemented like this:

fn change(&mut self, props: Self::Properties) -> ShouldRender {
    if self.props != props {
        self.props = props;
        true
    } else {
        false
    }
}

Components which don’t have properties should always return false.

fn view(&self) -> Html

Components define their visual layout using a JSX-style syntax through the use of the html! procedural macro. The full guide to using the macro can be found in Yew’s documentation.

Provided Methods

fn rendered(&mut self, _first_render: bool)

The rendered method is called after each time a Component is rendered but before the browser updates the page.

Examples

fn rendered(&mut self, first_render: bool) {
   if first_render {
     self.setup_element(); // Similar to 'mounted' in other frameworks
   }
}

fn destroy(&mut self)

The destroy method is called right before a Component is unmounted.

Dyn Compatibility

This trait is not dyn compatible.

In older versions of Rust, dyn compatibility was called "object safety", so this trait is not object safe.

Implementors