共计 2247 个字符，预计需要花费 6 分钟才能阅读完成。
download：高级前端进阶必修：自主打造高扩大的业务组件库.
.
序
都说“双端比拟算法”，那么双端比拟算法是什么样的呢？和 React 中的 diff 算法有什么不同？
要了解这一点，首先要理解 React 中的 Diff 算法，而后是 Vue3 中的 Diff 算法，最初说说 Vue2 中的 Diff 算法，从而比拟两者的区别。
最初说一下为什么 Vue 中不须要应用光纤架构。
对官网剖析做出反馈
其实 React 为什么不必 Vue 的双端比拟算法？React 官网曾经在源代码的评论里解释过了。让咱们来看看 React 官网是怎么说的。
函数 reconcileChildrenArray(
returnFiber: 纤维，currentFirstChild: Fiber | null，newChildren: 数组，expirationTime: ExpirationTime，): 光纤 | 空值{
// 这个算法不能通过从两端搜寻来优化，因为咱们
// 在纤程上不要有反向指针。我想看看咱们能走多远
// 用那个型号。如果最终不值得衡量，咱们能够
// 当前再加。// 即便是两端优化，咱们也心愿针对这种状况进行优化
// 在很少更改的状况下，强行进行比拟，而不是
// 去拿地图。它想摸索先走这条路
// 仅向前模式，并且仅在咱们留神到须要时才应用地图
// 很多前瞻。这不像双端那样解决反转
// 搜寻但那很不寻常。此外，对于两端优化来说
// 解决 Iterables，咱们须要复制整个汇合。// 在第一次迭代中，咱们将遇到最坏的状况
//(将所有内容增加到地图中)对于每次插入 / 挪动。// 如果更改此代码，也要更新 reconcileChildrenIterator()
// 应用雷同的算法。}复制代码
大略意思是:
React 无奈通过双端比拟优化 Diff 算法是因为目前纤程上没有反向链表，想晓得这个计划能保持多久？如果以后模式不现实，那么能够增加双端比拟算法。
即便是双端比拟算法，咱们也要对这种状况进行优化。咱们要用 Map 这种数据结构计划来代替原来那种改变不大的暴力比拟的计划。它的第一个搜寻周期是通过仅向前模式 (即，它仅从左向右搜寻)。(第一个周期可能还没完结，还有节点没比照。) 如果要持续在正向循环中搜寻，就必须应用数据类型映射。(就目前单向链表的数据结构而言，如果采纳的话)，双端比拟搜索算法很难管制其反向搜寻，但的确是一个胜利的算法。另外，双端比拟算法的实现也在咱们的工作迭代中。
第一次迭代，就对付用这个烂计划吧。每次增加 / 挪动时，咱们都必须将所有数据增加到 Map 数据类型对象中。
“咱们须要复制整套”，这句话，我晓得每个字，但我不晓得他想说什么，所以我不会翻译它。有大神晓得吗？
自己程度无限，错漏在劫难逃。如有错漏，请斧正。
尽管 React 官网曾经剖析过了，然而要想彻底搞清楚为什么，咱们还须要具体理解 React 的 Diff 算法是什么样的。在理解 React Diff 算法之前，咱们首先要理解什么是纤程，为什么在 React 中应用纤程？
纤维的构造
在 React15 之前，通过更新 React 的组件 来创立虚构 DOM 和 Diff 的过程是不间断的。如果组件树的级别须要深度更新，Diff 的过程会十分占用浏览器的线程，而咱们都晓得浏览器执行 JavaScript 的线程和渲染实在 DOM 的线程是互斥的，也就是说，在同一时间，浏览器要么在执行 JavaScript 代码操作，要么在渲染页面。如果 JavaScript 代码运行太长，页面就会卡住。
基于以上起因，React 团队在 React16 之后重写了整个架构，把原来数组构造的虚构 DOM 改成了一种叫纤程的数据结构。基于这种纤程数据结构，原来的不间断更新过程能够变成异步中断更新。
Fiber 的数据结构次要看起来是这样的，Fiber 的一些属性用来保留与组件相干的信息。
性能纤维节点 (
标签: 工作标签，
pendingProps: 混合，key: null | string，模式:TypeOfMode，) {
// 作为静态数据构造的属性
this.tag = tag
this.key = key
this.elementType = null
this.type = null
this.stateNode = null
// 用于连贯其余纤程节点，造成纤程树。this.return = null
this.child = null
this.sibling = null
this . index = 0；this.ref = null
// 作为动静工作单元属性
this . pending props = pending props；this.memoizedProps = null
this.updateQueue = null
this.memoizedState = null
this.dependencies = null
this.mode = mode
this . effect tag = no effect；this.nextEffect = null
this.firstEffect = null
this.lastEffect = null
// 调度优先级关联
this.lanes = NoLanes
this.childLanes = NoLanes
// 在另一次更新中指向该纤程对应的纤程。this.alternate = null
}
复制代码
纤程次要由以下属性连接成树形构造数据，即纤程链表。// 指向父纤程节点
this.return = null
// 指向子纤程节点
this.child = null
// 指向左边的第一个同级纤程节点
this.sibling = null
复制代码
例如，以下组件构造:
函数 App() {
返回(
我是
牛仔
)
}