javascript ---> [virtual DOM] && achieve initialization

Explanation

• Here describes how to use virtual DOM technology and how to implement a simple virtual dom
• You will learn:
  1. native JS operations on the DOM
  2. Virtual DOM-related concepts
  3.DIFF algorithm based on the concept

---

Why propose -> DOM operations slow

• We use the createElementproperty to create one of the most common divto see a number of the most common DOM attributes

<script>
	const div = document.createElement('div');
	let str = '';
	for(let key in div){
		str += key + ' ';
	}
	console.log(str);
</script>

• As can be seen, in fact, each DOM. Thus, when excessive operating element when the DOM, the performance can be imagined by a number of built-in property.
• This has forced us to think about a way to reduce DOM manipulation

---

Why propose -> contrast appears Ajax technology

• Early Web interaction, is the entire page to be updated.
• But most of the time, the user operates on a page, only a small part, which led to most of the updates are superfluous.
• So have the (partial update pages) Ajax technology
• Ajax technology can mimic, to render part of DOM

---

Why propose -> DOM tree concept

• You can argue will reduce DOM operations do not have to use virtual DOM, DOM and can operate directly.
• We must first understand the DOM tree.
• Have a look at the browser request procedure:
  1. the user enters the URL, the browser sends an HTTP request is obtained as an HTML page server
  2. obtained pages, HTML interpreter, lexical analyzer, parser will byte from the HTML flow interpreted as a DOM tree structure (the process is relatively complex, may open a new article specify)
  3. get the DOM tree, WebKit will result word batches will return to the rendering rendering thread
• DOM on the face of the generation and rendering said relatively small, and the main reason for this is to say: there is no description of a class or method, you can get the memory to be rendered DOM tree (there might be, but I do not know QAQ).
• The following little progress towards a virtual DOM

---

createElement

• We want to achieve the following structure
  
• The syntax is as follows:

let vertualDom = createElement('ul', { class: 'list'}, [
	createElement('ul', { class: 'list'}, ['a']),
	createElement('ul', { class: 'list'}, ['b']),
	createElement('ul', { class: 'list'}, ['c'])
])

• We want to after createElement, becomes the object structure is as follows:
  
• Obviously, when you create a virtual node can return a VNode class contains three properties (type, props, children)

class VNode {
	constructor(type, props, children) {
		this.type = type;
		this.props = props;
		this.children = children;
	}
}

const createElement = (type, props, children) {
	return new VNode(type, props, children);
}

• After the above, you can return a DOM object of the virtual.
• Below need a render method to generate the virtual real DOM DOM object, and rendering.

---

render

• dom render method receives a virtual object, creating real objects based on DOM
• 1. First, we passed in object, creating ul

const render = (vnode) {
	let el = document.createElement(vnode.type);
	return el;
}

• Print this:

let vertualDom = createElement('ul', { class: 'list' }, [
    createElement('ul', { class: 'list' }, ['a']),
    createElement('ul', { class: 'list' }, ['b']),
    createElement('ul', { class: 'list' }, ['c']),
])

let el = render(vertualDom);

console.log(el);

• 2. After With DOM, we give dom set properties due to property may be more,
• So we use for ... into get the keys and values
• Use setAttribute to set the properties

const render = (vnode)  => {
	let el = document.createElement(vnode.type);
	let props = vnode.type;
	for(let key in props) {
		el.setAttribute(key, props[key]);
	}
}

• Detect it, rewrite vertualDom

let vertualDom = createElement('ul', { class: 'list', style:'border:1px solid black' }, [
    createElement('ul', { class: 'list' }, ['a']),
    createElement('ul', { class: 'list' }, ['b']),
    createElement('ul', { class: 'list' }, ['c']),
])
let el = render(vertualDom);
document.body.appendChild(el);

• Now, with nodes and node attributes above, the following need to render its children ...
• It is natural to think of recursion.
• Traversing its children, if it is VNode type, just call render, otherwise it is considered a text node using the document.createTextNoderecord of

const render = (vnode) => {
    let el = document.createElement(vnode.type);
    let props = vnode.props;
    for (let key in props) {
        el.setAttribute(key, props[key]);
    }
    vnode.children.forEach(child => {
        child = child instanceof VNode ? render(child) : document.createTextNode(child);
        el.appendChild(child);
    })
    return el;
}