Cutting-edge technology decryption--virtualdom

As React one of the core technologies Virtual DOM , has been wearing a mysterious veil.

In fact, the Virtual DOM contains:

1. Javascript Dom Model tree (Vtree), similar to the document Node tree (DOM)
2. Dom model tree to Node tree method (Vtree, DOM)
3. Two DOM model Tree Difference algorithm (diff (Vtree, vtree), Patchobject)
4. Based on the difference Operation node method (Patch (Domnode, Patchobject), Domnode)

Next we explore these sections separately:

Vtree

The Vtree model is very simple and the basic structure is as follows:

{    // tag的名字    tagName: ‘p‘,    // 节点包含属性    properties: {        style: {            color: ‘#fff‘        }    },    // 子节点 children: [], // 该节点的唯一表示，后面会讲有啥用 key: 1}

So it's easy to write a way to create this kind of tree structure, for example react is created like this:

// 创建一个divreact.createElement(‘div‘, null, [    // 子节点img    react.createElement(‘img‘, { src: "avatar.png", class: "profile" }), // 子节点h3 react.createElement(‘h3‘, null, [[user.firstName, user.lastName].join(‘ ‘)])]);

Vtree-DOM

This method is not too difficult, we implement a simple:

function Create (VDS,Parent) {First look is not an array, if not an array of uniform arrays!Array.isarray (VDS) && (VDS = [VDS]);If there is no parent element, create a fragment to be the parent elementParent =parent | | document.createdocumentfragment (); var node; //traverse all Vnode VDS. foreach (function (VD) {//if Vnode is a text node if (istext (VD)) {//Create text nodes node = document.createtextnode (Vd.text); //otherwise is element} else {//create element node = document.createelement (Vd.tag);} //the element into the parent container parent.appendchild (node); //see if there is a child vnode, have children deal with children Vnode Vd.children && vd.children.length && Create ( Vd.children, node); //see if there is a property, there is the processing property vd.properties && SetProps ({style: {}}, vd.properties, node);}); return parent;}         

diff (Vtree, vtree), Patchobject

The difference algorithm is the core of the virtual DOM, in fact the difference algorithm is a trickery algorithm (of course you can not expect to use O (n^3) complexity to solve the difference of two trees), but can solve most of the problems of the web.

So how does the react trickery?

1. Layered contrast

, react tries to match only the nodes on the same layer, because in reality, it is unlikely that a component will be moved in different layers in the web.

2. Based on key to match

Remember the previous attribute in the vtree that there was something called key? This is the only identification of a vnode, used to match vnode in two different vtree.

This is also well understood, as we often encounter different permutations of component that have unique identifiers (such as course cards, user cards, etc.) on the web.

3. Optimization based on custom elements

REACT provides a custom element, so the match is simpler.

Patch (Domnode, patchobject), Domnode

Since the diff operation has found two different places in the Vtree, we can render the DOM differently based on the computed results.

Extended Reading

Refer to the following two code implementations:

1. @Matt-esch implemented: virtual-dom
2. Our own simple version of the implementation, for mobile page rendering: QVD

Cutting-edge technology decryption--virtualdom