Direct operating DOM DOM certain time-consuming than the virtual operating it?
Or a direct DOM manipulation DOM manipulation must be better than a virtual time-consuming it?
1) the nature of virtual DOM is a JS objects, virtual DOM DOM reduced the real operation, when the modified data is modified to produce new virtual virtual DOM DOM,
The old and the new virtual DOM DOM using diff algorithm to get the patch (that is, the need to modify the section), then this patch hit the browser
(Redraw reduction and reflux, to achieve the purpose of performance optimization)
2) cause each redraw operation or DOM reflux, frequent changes of the real DOM triggers multiple layout and redraw considerable resistance performance (full CRUD)
A), virtual DOM
1) What is the nature of DOM?
DOM is a concept browser, represents an element on the page using js objects and provides operational DOM objects API
2) What React virtual DOM is?
DOM is a virtual JS objects (data + JXS template), with a js object to describe the real DOM
Why virtual DOM improve performance?
Virtual DOM improve performance, it does not mean that manipulate the DOM, DOM but the number of operations is reduced, reducing reflux and redraw
Dom js virtual equivalent in the middle and added a real cache dom, dom diff algorithm avoids the use of unnecessary dom operation, which improves performance
1) shows the structure of a DOM tree structure by JavaScript object;
2) Then build a DOM tree with the real tree, which is inserted into the document
3) When the state changes, re-construct a new object tree
4) followed by two trees were compared, recorded with the new trees and old tree
5) The difference between the two applied to the recorded step 2) is constructed in real DOM tree, the updated view
Use diff algorithms compare the old and new virtual DOM ---- that is to compare two objects js less consumption performance, and comparison of two real DOM more consumption performance to a virtual DOM greatly improved performance
Virtual DOM occurrence timing alignments: When data changes virtual DOM alignment occurs (props and state change, and change props that state parent component changes, the final analysis is to call setState () when the state occurred change, then the virtual DOM happen comparison).
setState () method is asynchronous, so as to enhance performance such as calling 3 ----- setState () change data, the call interval of the small, React 3 setState setState can be combined into one, than only once the virtual DOM , and then update the DOM, thereby eliminating the need for two additional performance loss compared to a virtual DOM
What happened after the call setState ()?
1) First, React to the setState () method of the current state of the incoming parameters combined with the component objects
2) Then, the trigger tempering process (the Reconciliation)
3) After the tempering process, React will be relatively efficient manner, React construct an element tree based on the new state
4) After the element tree obtained React, React automatically calculate new node tree and the difference of the trees, and then re-rendering interface according to minimize the difference.
Differences in the calculation algorithm, React relatively accurately know which position has changed and how to change, which ensures that on-demand updates, but not all, re-rendering.
3) Virtual DOM purpose?
Efficient update the page DOM elements
Two), diff algorithm: the same layer as alignment, different lists of key values using
- The tree structure in a hierarchical decomposition, comparison only sibling elements.
- Each cell is added to the list structure of the unique key attribute, to facilitate comparison.
- React only match the same class of component (there's a class refers to the name of the component)
- Merge operation, call the method setState component of the time, React mark it as dirty. To the end of each event loop, React check component marks all dirty, and then repaint.
- Select temper tree rendering. Developers can override the diff improve performance shouldComponentUpdate
React DOM is the same layer alignment
diff算法指的就是两个虚拟DOM作比对，在diff算法中有个概念就是同级比对，首先比对顶层虚拟DOM节点是否一致，如果一样就接着比对下一层，如果不一样，就停止向下比对，将原始页面中这个DOM及 下面的DOM全部删除掉，重新生成新的虚拟DOM，然后替换掉原始页面的DOM
存在问题：如果第一层虚拟DOM节点不同，下面的都同，使用虚拟DOM的diff算法，则这些节点都不能使用了，会造成重新渲染的浪费。
优点：同层虚拟DOM比对，只需要一层层的比较，算法简单，比对的速度快
虽然会造成重新渲染的浪费，但是会大大减少两个虚拟DOM比对的性能消耗
列表中的元素使用不同的key
虚拟DOM中的列表中同级元素的key值要不同，使用diff算法，判断哪些元素是增删改，从而提高性能
列表中key的作用：
1）key是React用于跟踪哪些元素是增加、删除、修改的辅助标记，需要保证在同级元素中key的唯一性
2） React Diff 算法借助元素的 Key 值判断元素是新增、删除、修改，从而减少不必要的元素重渲染。
3）React 还需要借助 Key 值来判断元素与本地状态的关联关系
问题：在循环中key值最好不要用index的原因？
如果key值使用index的话，就可能无法使原始的虚拟DOM中的key值和新的虚拟DOM中的key值一致，从而不能充分发挥diff算法的优势。
比如一个数组里有数据a b c，用index表示的key分别为0 1 2
当删除a时，b c的key分别为0 2，从而导致元素的新旧key值不一样，即key值不稳定，所以key值就失去其存在的意义了
比较合适的key值有：id或者不一样的内容
1）tree diff
新旧两颗DOM树，逐层对比的过程，就是Tree Diff；当整颗DOM树逐层对比完毕，则所有按需更新的元素都能找到
2）component diff
在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff
如果对比前后，组件类型相同，则暂时认为此组件不需要更新；
如果对比前后，组件类型不同，则需要移除旧组件。创建新组建，并追加到页面上
3）element diff
在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做element diff