Redraw based on only changed data
d9k opened this issue · 4 comments
Hello!
I read your whole tutorial for mithril, awesome reading!
For example in chapter 12:
If I add console.log(label + ' redraw'); into view() function (~67th line) inside createTemperature() I see
Air redraw
Water redraw
every time I click any button!
Is it possible to rewrite meiosis pattern to rebuild vdom only for components dependent of changed data?
For example if I increase water temperature only Water redraw line must appear at console.
@d9k Greetings! Thank you for your feedback, much appreciated!
You ask a good question. This is addressed in Chapter 3 - Update Model:
Note: you might wonder about rebuilding the whole view and re-rendering it when something changes. Generally speaking, producing a vnode is not a performance concern. Further, re-rendering the view is what virtual-DOM libraries are good at: figuring out what minimal changes are needed to make the real DOM reflect the view.
That being said, nevertheless I will show how to prevent re-construction of sections of the virtual-DOM tree that have not changed.
I will add a link here when that section is ready. Stay tuned!
@d9k I still need to do a writeup, but in the meantime I thought you might be interested in seeing the code example.
Essentially to prevent re-renders, this example:
- uses immutable objects, to easily determine a change with
!== - uses Mithril components to have access to lifecycle methods
- uses Mithril's
onbeforeupdatelifecycle method to determine whether to re-render
You can see the result in the console. For example, when you change the Air temperature, you only see render Temperature Air, the other components are not re-rendered.
Hope that helps!