S: Actual dom tree is very complex (single node to mount a huge number of properties, 200 months), no optimization strategy, frequently trigger rearrangement, serious performance consumption
A: Virtual dom: dom consistent with the actual tree structure, storing only the necessary information tagName \ props \ children
createElement: Create a virtual dom
diff: depth-first dfs -> patch
patch: The patch needs to be changed, type: replace \ reorder \ props \ text, node \ content
Dom actual depth-first tree, there is a patch of change trigger dom update (replaceChild \ reOrder \ setProps \ text)
key is used for identification diff-reOrder algorithm \ positioning (easy reuse)
Reproduced in: https: //www.jianshu.com/p/c75b93ac2b2a