面试题：React中Keys与列表项更新的关系

Question

假设在一个React应用中有一个包含多个列表项的列表，每个列表项有其唯一标识作为key。当列表项的数据发生变化，比如某一项的文本内容改变，React是如何利用key来高效更新DOM的？请从虚拟DOM和Diff算法角度分析。

Answer 1

1. 虚拟DOM基础
   • React使用虚拟DOM来描述真实DOM树的结构。当数据发生变化时，React会创建一个新的虚拟DOM树。例如，在包含多个列表项的列表中，每个列表项在虚拟DOM中有对应的节点表示。
2. Diff算法
   • 分层比较：Diff算法会对新旧虚拟DOM树进行分层比较。对于列表这种同层级的结构，它会在该层级上进行操作。
   • 基于key的比较：
     • 当列表项数据变化，比如某一项文本内容改变时，React的Diff算法会根据列表项的key来识别每一个列表项。如果没有key，Diff算法只能按照顺序比较列表项。例如，若有列表[A, B, C]变为[B, A, C]，无key时，Diff算法会认为A变成了B，B变成了A，C保持不变，这样会导致不必要的DOM更新。
     • 而有了key，Diff算法可以精准识别每个列表项。当某一项文本内容改变，如列表[<li key="1">A</li>, <li key="2">B</li>, <li key="3">C</li>]中key为2的列表项文本从B变为D，Diff算法通过key快速定位到key为2的列表项对应的虚拟DOM节点，发现文本内容变化，只对该节点对应的真实DOM进行更新，而不是更新整个列表。
3. 更新DOM
   • 最后，React根据Diff算法计算出的差异，将变化应用到真实DOM上，实现高效更新。例如，只更新文本内容变化的那个列表项的DOM，而不是重新渲染整个列表的DOM结构。