对react key的思考

89 阅读1分钟

react key是为了提升diff过程以及最终操作dom的性能。 、

react的diff子元素列表的时候,会根据当前key值,去新旧树中寻找到对应的子元素来进行比较。

列表一般分为两种,

第一种是列表的内容完全改变,比如由123变成456。这种情况下设置索引是可以的。列表内容完全变了之后,其实删除子元素重建反而是更高效的做法。如果设置唯一id的话,react就根据唯一id去匹配新旧树中的子元素,匹配完成发现没有对应的子元素,然后才会进行删除旧元素新建子元素的操作,所以匹配的过程完全是没必要的。当设置index的时候,react会根据index横向比较,省去了匹配的过程,直接进行新元素新建替换的操作。

第二种是列表的内容没变,只是进行了重新排序,比如123变成321。这种情况适合设置成唯一id。设置唯一id之后react就根据唯一id去匹配新旧子元素,匹配之后发现内容没有变化,只是位置发生了变化,则只会通过父元素对子元素做一个重新排序的过程,避免了重建子元素的过程。