Real diff 算法是怎么运作的？从tree层到component层到element层。

        Real diff算法又被称为(DOM diff算法)是React和类似框架中用于更新视图的关键部分，它主要分为三个层次分别是Tree层、Component层和Element层，每个层次都有特定的比较和更新策略。

1. Tree 层

Tree 层是指 Virtual DOM 树的比较层次，用于确定哪些部分需要更新。Real Diff 算法主要利用了 Virtual DOM 的特性：

        1.生成虚拟 DOM 树：在每次组件状态更新时，React 会重新构建一棵新的虚拟 DOM 树。

        2.比较两棵虚拟 DOM 树：通过深度优先遍历（DFS）的方式，逐节点比较新旧两棵树的节点。

        3.标记节点操作：标记节点为新增、删除或更新，确定需要进行哪些具体的 DOM 操作。

2. Component 层

Component 层主要关注组件级别的比较和更新策略：

        1.shouldComponentUpdate 方法：React 中的 PureComponent 或手动编写的 shouldComponentUpdate 方法用于比较组件的 props 和 state 是否发生变化，决定是否需要更新组件。

        2.避免不必要的渲染：如果某个组件及其子树没有发生变化，React 会避免重新渲染该组件及其子组件，从而提升性能。

3. Element 层

Element 层是指最终进行 DOM 操作的层次：

        1.生成 DOM 操作指令：根据在 Tree 层和 Component 层的比较中确定的需要进行的操作（新增、删除、更新），生成最小的 DOM 操作指令队列。

        2.批量更新 DOM：React 将生成的 DOM 操作指令进行批量处理，最终更新真实的 DOM。

        3.DOM Diff 算法优化：React 还使用了一些优化策略，如利用 key 属性优化列表渲染时的更新效率，确保尽可能少的 DOM 操作。