Add a diagram of the component lifecycle

[mc1098]

This is about:

• Undocumented code

Problem

Add a diagram of the component lifecycle under 'Lifecycle' in the docs.

This issue was originally started in the yewstack/docs - Original issue. I'm just moving it over here as that repo is now archived (as proposed in #1421).

For convenience I'll just echo the original proposal below:
Render Cycle¹

1. create()
2. view()
3. yew renders to page
4. mounted()

Note: should explain how children components are rendered.. (Parent view -> Child view -> Child mount -> Parent mount)

Update Cycle¹

1. trigger event / callback / send message
2. update()
3. (optional) view()
4. yew renders to page

Change Cycle¹

1. render component with new props
2. change()²
3. (optional) view()
4. yew renders to page

¹ - Note made in original issue: "'Change cycle' and 'update cycle' should be altered slightly because they're not 'cycles' as such."
² - In the original issue this is 'update()' which was a typo, change() is the correct method.

As noted in the original issue the diagram should be in SVG (rather than a PNG etc) as it would offer better resolution.

[mc1098]

Here is my try:


I had to pull out the Event loop bits into a different diagram because it was bit too busy for nomnoml to make a clear diagram.
I could draw out a full diagram with the Event loop bit expanded if that's preferable but thought I'd check if all of the above is correct and covers all the requirements.

Still learning about Yew so I'm sure it will need some, or maybe a lot of, tweaking :D
Not sure if it's just worth stating that Children will always be resolved first instead of the way I've tried to show that in the diagram.

Note: Images are PNG because Github doesn't accept SVG here, but the final image for the website would be SVG

[krzysiek4321]

I'd say a component needs to be aware of the window state machine (svg). Read more at https://developer.chrome.com/docs/web-platform/page-lifecycle-api