Virtual DOM
under the hood
What is VDOM
Why is it better than DOM?
VDOM - it's lightweight copy of DOM.
It's faster because of...
This approach works faster because it does not include all the heavy parts of the real DOM.
But only if we do it right. There are two problems: when exactly to redraw the DOM and how to do it efficiently.
The first
"Dirty checking" is to poll the data at regular intervals and recursively check all the values in the data structure.
The second
"Observable" is to observe the state change. If nothing has changed, we do nothing. If changed, we know exactly what needs to be updated.
What makes this approach really fast?
1.Efficient comparison algorithms.
2.Grouping read & write operations when working with DOM.
3.Efficient updating of only sub-trees.
VDOM
- JSX & Babel
- VNode
- Render
- create & remove VDOM
- Re-rendering
JSX & Babel
Example
VNODE
Example
Render
componentWillMount - [D]St/O - Sr
componentWillReceiveProps - [D]StPr - Sr
shouldComponentUpdate - O - St/Sr
componentWillUpdate - [D]StPt - Sr
componentDidUpdate - Sr - St
componentDidMount - Sr - St
componentWillUnmount - Del - St
(Preact)
ComponentDidUnMount - Sr - St
(React)
componentDidCatch - Err
static getDerivedStateFromProps - (2)StPr - Sr
getSnapshotBeforeUpdate - PreCommitPhase
create update remove
VDOM
Creation
Example
DOM Creation
Example
If have children?
Example
Append children to parent
Example
Children do same
