说说Real diff算法是怎么运作的，从tree层到component层到element层分别讲解？

Real Diff 算法是 React 在进行虚拟 DOM 对比时使用的一种算法。它通过比较两棵虚拟 DOM 树，找出二者的差异，并最小化实际 DOM 的操作，从而提高渲染效率。

算法的运作可以分为三个层级：Tree 层、Component 层和 Element 层。

Tree 层（Fiber Reconciliation）：

在 Tree 层，React 使用 Fiber 数据结构来表示组件的树状结构。在对比两棵 Fiber 树时，React 会执行深度优先遍历，比较每个节点的类型和属性。

如果类型不同，React 将直接替换该节点及其子节点。

如果类型相同，React 将比较节点的属性，将属性变化更新到实际 DOM 上。

如果节点有子节点，React 将继续递归比较子节点。

在这个过程中，React 还会记录下每个节点的更新标记，并根据优先级调整遍历顺序。这样可以尽早处理高优先级的更新，提高交互性能。

Component 层（Reconciliation）：

在 Component 层，React 比较组件的实例，以确定是否需要重新渲染组件。

如果组件的类型不同，React 将销毁旧的组件实例，创建新的组件实例，并更新对应的实际 DOM。

如果组件的类型相同，React 将比较组件的属性和状态是否发生变化。若有变化，则进行更新，并将变化更新到实际 DOM。

在这个过程中，React 还会执行一些生命周期方法，如 componentDidUpdate()，让开发者可以对更新做出相应的处理。

Element 层（Render）：

在 Element 层，React 将比较虚拟 DOM 的结构和属性，以确定是否需要进行渲染。

如果两个元素的类型不同，React 将销毁旧的元素，创建新的元素，并将新元素插入到实际 DOM 中。

如果元素的类型相同，React 将比较元素的属性，将属性变化更新到实际 DOM 上。

在这个过程中，React 使用了高效的 Diff 算法来准确找出差异，并最小化实际 DOM 的操作。

总结起来，Real Diff 算法从 Tree 层到 Component 层再到 Element 层，逐层比较并更新差异，实现了高效的虚拟 DOM 对比和渲染。通过最小化实际 DOM 操作，React 提高了渲染性能，并提供了灵活的更新机制。