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

Completion of the treatment

After first initial render

Delete

Delete element

Delete component

Re-rendering

How to avoid repeat creation Vnodes?

Links