1. What is a virtual DOM
React in fact render the content will return function generates the DOM, the contents of return consists of two parts, JSX part, the other part is in the state of the data, so that simply, in React the binding state generates JSX the DOM.
Now put aside the virtual DOM aside, what to do if we DOM to achieve when the data changes React to implement change when the page content, we will be how to achieve?
The first scenario:
1) JSX + state generate real DOM, and displayed on the page
2) state changes
3) At this time JSX + state again combined to generate a new real DOM
4) new DOM directly replace the original DOM
This page will change, but to actually create a DOM and then reload the page in a new DOM are more consumption performance.
The second option:
1) JSX + state generate real DOM, and displayed on the page
2) state changes
3) At this time JSX + state again combined to generate a new real DOM
4) new and original DOM DOM compare, identify differences
5) identified using the difference, replace the corresponding portion of the page original DOM
The page will change, and compared to a multi-program comparison step but only need to replace the original part of the DOM can be integrated, the second scheme is better than a program.
Third option
1) JSX + state to generate a virtual DOM (JS is a virtual DOM object used to describe true DOM)
For example the following code:
<div id='abc'>item</div>Note that the above div, spanJSX label syntax is not true DOM, here is Mr. into a virtual DOM, then the next step when it is generated by the virtual real DOM DOM, DOM by the JSX to the middle of a real virtual DOM.
JSX -> 虚拟DOM（JS对象） -> 真实DOMIn other words, JSX JS objects need to be converted, then converted to real DOM.
Generated virtual DOM is
['div',{id: 'abc'}, 'item']The format for the virtual DOM
['标签名'，标签属性对象，子标签]So <div id='abc'>item</div>how is it converted to JS object?
React actually write in the above is equivalent to write the following:
React.createElement('div', {id: 'abc'}, 'item');So in fact, even if there is no JSX grammar through written above is possible, but will be very inconvenient.
2) to create realistic virtual DOM DOM structure displayed on the page.
3) JSX + state generates a new virtual DOM
4) two virtual DOM are compared to identify differences
5) modifying the DOM directly on the page replacement according to a difference
JS DOM is a virtual object to generate a virtual DOM easier and time-efficient than generating a real DOM structure, and the contrast between (JS objects) two virtual DOM is relatively simple, so the program three best.
A third idea is the program React used.
2. The advantages of virtual DOM
Then the virtual DOM advantage in the end, what does?
1) performance
This is done by comparing the above it can be seen
2) so that the end cross-application can be achieved, for example, the native application.
React Native able to do a native application virtual DOM is a very important aspect of native applications is no DOM this concept, DOM is the browser exist, but with virtual DOM (JS objects) after, in native applications can the virtual DOM (JS objects) is converted to a number of native applications can support native components appear in the native application.
3. Virtual DOM comparison
It is important when using a virtual DOM step is a comparison between the two virtual DOM, then how to compare it?
React used diff algorithms, in simple terms mainly in the following three aspects:
1) When rapid succession, called multiple times setState, React will only take a virtual DOM of comparison.
We know that when state or props change, the page will change, in fact, change props are also because of changes in the parent component state, so when the page changes actually called setState lead to changes in the data when changes occur. When rapid succession setState called multiple times, if every time take a virtual DOM alignment, then the performance will be relatively low, whereas multiple calls setState only take a virtual DOM alignment will improve performance. This is also the reason why the setState be set to asynchronous, as occurs on a virtual DOM than if then synchronized when executing the first setState time. (Synchronous sequence is executed immediately, when all asynchronous synchronization program completed execution after execution)
2) When comparing the virtual DOM layer by layer the same layer as compared to when the upper layer of variance, then the following layers do not need to compare the following layers DOM new DOM will be replaced.
That might look, reusability is not very good, because there are underlying layers may have many of the same DOM. But doing so will make the comparison algorithm is very simple, relatively very fast.
3) Set the key value
Suppose now that there is an array [a, b, c]through each one displayed on the page, now the first array to change a deleted, if no key value, the array [b, c]can not be aligned and the original array, and for example, b in the end which will be a source array Compare it?
However, there is now assumed that the key value, a primary key value in the array is a, b is the B key value, the key value of c is c. After deleting a, by key value, b of the key values of b found in the original array b, indicating that b does not change, c empathy did not change, but the original array a is not found in the new array, the description of the new array a will be deleted, so that during operation a page can be deleted.
One thing to note here is that, key values must choose not change, the use of an array of key values of the index do not desirable. Still to be described above as an example. a key value of the original array is 0, b is a key value, the key value c is 2, after a delete, the key value of the new array b is 0, c is a key value, the original ratio after the same b key value and a new array of arrays, virtual DOM will think they are the same, no difference, but in fact they are different.