R & lt EACT DOM process
Immutable data, Immutable parameters in the data structure to phase dom virtual objects.
diff algorithm is in the old virtual dom dom to the new virtual stage.
From the data structure -> Virtual Object -> dom tree to the virtual -> new virtual dom -> rendered as real dom -> Mount
Compared to a version tree structure comparison algorithm complexity may be reduced from (o (n ^ 3)) to (o (n)).
Tree dom tree structure if there are 1000 child nodes, general diff algorithms, compares 1000 ^ 3 times a waste of resources.
diff strategy provides increased gradually render dom node performance, mainly there are three strategies
React diff algorithms
The process of converting into a real virtual dom dom, called to reconcile, to reconcile the specific implementation strategy is diff.
There are three major categories diff algorithm complexity may be o (n ^ 3) is converted to o (n).
tree diff
(1), updateDepth of Virtual DOM tree for level control
(2), comparing the same layer, if the node does not exist, the node and its children are deleted
(3) just traversed once, you can be more whole grain dom tree complete
(4) if the cross-hierarchical, only the new node and delete node operation, it is recommended try not to cross-level, cross level available css display: none and other means complete.
component diff
(1), the same type of two components, comparison Virtual DOM tree
(2), if the two components do not change can be judged by shouldComponentUpdate
(3), different types of components, the components will be determined as dirty process, delete. Or create a new form
element diff
(1), determine the old and the new set of components, assemblies if there is change, need to re-create
(2), the same set of child nodes to add unique key for distinguishing assembly, main operations: move, insert, delete
Focus on that move
(1), the old and new node index contrast, the new lower nominal lastIndex, called the old index, if the index is greater than lastIndex , requires the mobile node to the old node to a new position, the opposite is not moving.
(2), if the corresponding position node not found, new; if the old node in less than a new node group, delete; usually done in the last deletion.
(3), a special case, the last node moves to the first position , will lead, in front of the lastIndex n-1 nodes are large, and then are moved back, the image performance. To avoid such operations.