React is a web front-end UI library, concern is how to efficiently render the UI interface based on the data. Virtual binding dom diff and efficient algorithm, such that when the data are changed, REACT through simple and efficient algorithm to find the real change dom, dom operate simultaneously rendering UI interface according to the change.
According to a conventional tree structure to another tree structure means a switching operation is a complex and time consuming process, generally reach time complexity O (n ^ 3), each coupled with a node is included large dom object information, the general algorithm may change according to achieve real-time data, update UI view.
React according to a specific scene dom tree, we developed a large and efficient diff strategy:
Cross level 1. Web UI dom nodes in mobile operating small and can be ignored
2. The assembly of similar type have the same tree structure, the tree structure of nodes of different types are not the same as the probability of large
3. For the same level of node can be distinguished by unique id
According to the above three-point strategy, comparing two numbers dom, only to compare the same level of points.
<1> when there is a move across the level, only to create and delete operations, the operating performance of an impact React, React is not recommended for cross-dom-level operations, development component, stable dom structure will help performance upgrade, you can hide or show CSS node, not really add or remove nodes.
<2> If the same types of components, in accordance with the comparison continues next level node, if not the same type of component, it is determined dirty Component, thereby replacing all subcomponents of the entire assembly under the new assembly, for the same type of components, data may not changed or not required according to the UI view, allows developers React judged by shouldComponentUpdate (nextProps, nextState) whether the component needs to be diff
<3> for sub-assemblies at the same level, react only recommend to add key distinction to improve the efficiency of diff. First, will the new node traversal operation, by a unique key can identify the need to create, delete, and shifting nodes. If the same set of nodes in the presence of old shift operation, to avoid the overhead of a new node to delete (operation comprises calculating and dom). Shift operation algorithm is as follows:
let lastIndex = position of the recording element before the current element in the outermost 0 // in oldList
for(element in newList){
// element._mountIndex is the position of the current element in the old List, newIndex is the position of the current element in the new LIst
if(element._mountIndex < lastIndex)
move(element, newIndex)
lastIndex = Math.max(element._mountIndex, lastIndex)
}
If the current strategy is to position the elements in the old List is smaller than in the position it before the old elements in the List, it shows the current element needs to be moved back to become a new List.
Summary: diff algorithm is not to construct a new tree, and find out the ratio of some changes to be minimal operator for older dom tree to optimize the efficiency of the UI update.
Reference: https://zhuanlan.zhihu.com/p/20346379