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)
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>
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,
}
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!
Top comments (0)