React18的diff算法是怎么回事呢？

Question

Vue2 的diff算法使用的双端diff算法
Vue3的diff算法使用的是快速diff算法

而React 出了一个 React Fiber架构

页面分挂载和更新两个阶段，而更新又分协调和提交两个阶段，Fiber架构又将协调阶段做了一个拆分，可以拆分成多个子任务。

当浏览器空闲的时候，协调执行一个子任务，然后提交。这样细颗粒化的任务拆分。可以有效提升页面组件的更新渲染性能。

Answer 1

该回复引自免费微信小程序-皆我百晓生:

---

在React Fiber架构中，diff算法被称为协调算法。它的目标是找出前后两个虚拟DOM树的区别，并且尽量高效地将这些变化应用到实际的DOM上。

React Fiber使用了一种叫做"异步可中断"的方式来处理组件更新。在每个更新周期中，React会将更新操作划分为多个优先级不同的任务单元，称为fiber。通过这种方式，React可以在每个任务单元之间进行优先级调度，以确保页面的响应性。

React18引入了增量渲染的概念。在更新过程中，React将任务分割成多个小任务，这些小任务可以在浏览器空闲时执行。通过这种方式，React可以在多个更新之间插入其他紧急任务，提高了页面的流畅性。

React的diff算法会比较前后两个虚拟DOM树，并且为每个节点添加一个唯一的key属性，以便进行更高效的diff操作。React会首先比较节点类型，如果类型相同，则继续比较属性和子节点。对于不同类型的节点，React会直接替换整个节点。

在比较属性时，React会采用"精细化"的策略，只更新需要更改的属性，不会重新渲染整个节点。这种策略大大减少了更新操作的开销。

总结来说，React的diff算法通过将更新操作分割成多个小任务，分别在浏览器空闲时执行，以及采用增量渲染和精细化的策略，提高了页面更新的性能和响应性。