在Reactjs官方文件中：
列表式差异
有问题的案例 为了让孩子和解，React采取了一种非常天真的方法。它会同时覆盖两个孩子的列表，并在出现差异时生成突变。
例如，如果在末尾添加元素：
renderA: <div><span>first</span></div>
renderB: <div><span>first</span><span>second</span></div>
=> [insertNode <span>second</span>]
在开头插入元素是有问题的。 React将看到两个节点都是跨距，因此会进入突变模式。
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></div>
=> [replaceAttribute textContent 'second'], [insertNode <span>first</span>]
有许多算法试图找到转换元素列表的最小操作集。 Levenshtein距离可以使用O（n ^ 2）中的单个元素插入，删除和替换来找到最小值。即使我们使用Levenshtein，当节点移动到另一个位置并且执行此操作的算法具有更复杂的情况时，也不会发现。
键 为了解决这个看似棘手的问题，引入了一个可选属性。您可以为每个孩子提供用于进行匹配的密钥。如果你指定一个键，React现在能够找到插入，删除，替换并使用哈希表在O（n）中移动。
renderA：首先 renderB：secondfirst =＆GT; [insertNode second] 在实践中，找到钥匙并不是很难。大多数情况下，您要显示的元素已经具有唯一ID。如果不是这种情况，您可以向模型添加新的ID属性，或者对内容的某些部分进行哈希以生成密钥。请记住，密钥只能在其兄弟姐妹中独一无二，而不是全局唯一。
但是这个算法的细节是什么？