react原理面试题

以下是一些关于React原理的面试题：

一、虚拟DOM（Virtual DOM）

1. 请简要解释React中的虚拟DOM是如何工作的？

   • 答案：
     • 当组件的状态发生变化时，React首先会在内存中创建一个新的虚拟DOM树来表示更新后的UI结构。
     • 然后，React会将这个新的虚拟DOM树与旧的虚拟DOM树进行比较（这个过程称为Diff算法）。
     • Diff算法会找出两个虚拟DOM树之间的差异，例如哪些节点被添加、删除或者修改了。
     • 最后，React根据这些差异计算出最小的DOM操作集合，只将这些必要的操作应用到实际的DOM上，从而提高性能，避免了直接操作真实DOM带来的大量重绘和回流。

2. React的Diff算法有哪些优化策略？

   • 答案：
     • 同一层级的节点进行比较：React只在同一层级的节点之间进行比较，不会跨层级去查找差异。这样可以大大减少比较的复杂度。
     • 组件类型比较：如果两个节点的组件类型不同（例如一个是<div>，一个是<span>），React会直接认为这是一个全新的节点，会销毁旧节点及其子节点，并创建新节点及其子节点，而不会深入比较子节点。
     • 列表渲染优化：当渲染列表时，如果给每个列表项设置了唯一的key属性，React可以根据key来更高效地识别哪些列表项是新增、删除或者移动的。

二、组件渲染与更新