(1) Do not write key

+ Local reuse node: in the process of comparing whether the old and new nodes are the same node, it will be judged that the old and new nodes are the same node, because both A. and B. key are undefined. So nodes are not recreated and deleted; So there may be some improvement in rendering performance (in terms of creating and removing nodes); + but only for stateless components; For stateful components, unknown bugs may occur if they are reused;Copy the code

(2) Write key

  • Maintain component state to ensure component reuse. Because there are only identifies the key components, whether does not compare the old and new two at a time when the node is the same node directly determine to the same node, but will continue to find the key in the next node to compare the same node, can find the same key words will reuse nodes, can’t find, you can add or remove nodes.

  • The function of key is to find the corresponding node faster and improve the diFF speed when the DIFF algorithm is executed.

    In order to enhance reuse, four matching search methods are adopted when diff two new and old lists: new before == old before and new after == old after and new after == old before and new before == old after. If the four peer comparison strategies above do not find dom elements that can be reused; The remaining elements of the old list will be transformed into a map, where the key is the key of each node and the value is the index. Then new nodes will be found in this map. If there is no new node, it will be created, and if there is one, it will be reused. If there is no key, you need to loop through it, which costs performance.