DEV Community

Scott
Scott

Posted on • Updated on <time datetime="2021-01-08T17:43:38Z" class="date-no-year">Jan 8</time>

Understanding Yew Part 1

Hello! I am learning Yew for writing SPA's in Rust! I found some of the concepts difficult to understand at first and decided to take notes (simplifying the concepts for my stupid brain)..

I am planning on making this a series with the following.

1. Yew component and lifecycle overview
2. Yew router overview
3. Yew fetch service overview
4. Yew agents overview
5. Debugging (maybe)
Enter fullscreen mode Exit fullscreen mode

Without further ado, lets get into part 1!

Overview

Components

Are semi-arbitrary Rust structures that~

  • Represent pecies of reusable HTML
  • Utilized by name in HTML
  • Have a defined lifecycle
  • Contain their own state
  • Recieve props from parent component

Components can contain many child components, but logically speaking have only one parent.


<!-- Parent Component -->
<div>
    <div>Main Component Text</div>
    <!-- Child Component with 2 properties -->
    <ChildComponent1 cc1prop1=1 cc1prop2=2 />
    <!-- Another Child Component with 1 property -->
    <ChildComponent2 cc2prop1=3 />
<div>
Enter fullscreen mode Exit fullscreen mode

Data relationships between parent and child are as follows:

  • Parents may pass data as Props to Child Components
  • Parents may pass callbacks as Props
  • Child may update parent state using callback

With the above said, as an example if you have many child components that need to manage a common state, that state should be stored in a parent element.

Common Component Structure Properties

The struct created to define your component tends to have a couple of important and common parameters. For example~

struct MyComponent {
    // This is another arbitrary struct containing data
    // that YOU require for your application's state. 
    // You need to create this State struct, or whatever
    // you want to call it.
    state: State,
    // You will need to add this property if you intend
    // to interact with the Component API, i.e. adding 
    // callbacks to modify this component's state, or
    // sending update messages to call update() actions
    // on the component.
    link: ComponentLink<Self>,
    // Used in relation to calling external API's
    // I will follow up on this in a new article.
    task: None,
    // This is yet another arbitrary struct that you will
    // need to create in order to define properties sent
    // by a parent component.
    props: Props,
}
Enter fullscreen mode Exit fullscreen mode

Component Implemetation

A components are implemented suprisingly enough by impl yew::Component for YOUR_COMPONENT {} required methods and types to implement are as follows:

Kind Name Description
Type Properties Properties to the component during lifecycle events. If none are to be passed this should be (). Otherwise you will need to define your Props struct.
Type Message An enum containing actions to process during a component lifecycle update(). enum members may contain parameters.
Method create() Initializes state and stores props from the parent
Method update() Called for whenever an update message is sent. update() should take appropriate action depending on the message sent.
Method change() This method conditionally re-renders the child component if props have changed during re-rendering of the parent.
Method rendered() This method is called after view() and performs functions that require the component to already be rendered. I.E. shift screen focus to element. (NOT REQUIRED)
Method destroy() Performs cleanup operations for a component (NOT REQUIRED)
Method veiw() Creates the HTML to render for the component.

Component Lifecycle

A components life begins when it its create() method is called. This typically happens in an html!() macro.

TODO: I feel I should give an example of this

Next its view() method is called and the component is rendered as HTML.

A component will be re-rendered on the following conditions.

  • A re-render is requested by the change() method.
  • A re-render is requested by the update() method.

A component will be destroyed when simply enough, its destroy() method is called.

Conclusion

I will revisit this for to update any errors or missing information, but for now I feel I have summed up yew components to my satisfaction. If anyone has any questions or notices any mistakes please let me know in the comments!

Discussion (0)