关于diff:为什么-React-的-Diff-算法不采用-Vue-的双端对比算法
前言都说“双端比照算法”,那么双端比照算法,到底是怎么样的呢?跟 React 中的 Diff 算法又有什么不同呢?要理解这些,咱们先理解 React 中的 Diff 算法,而后再理解 Vue3 中的 Diff 算法,最初讲一下 Vue2 中的 Diff 算法,能力去比拟一下他们的区别。最初讲一下为什么 Vue 中不须要应用 Fiber 架构。React 官网的解析其实为什么 React 不采纳 Vue 的双端比照算法,React 官网曾经在源码的正文里曾经阐明了,咱们来看一下 React 官网是怎么说的。function reconcileChildrenArray(returnFiber: Fiber, currentFirstChild: Fiber | null, newChildren: Array<*>, expirationTime: ExpirationTime,): Fiber | null { // This algorithm can't optimize by searching from boths ends since we// don't have backpointers on fibers. I'm trying to see how far we can get// with that model. If it ends up not being worth the tradeoffs, we can// add it later.// Even with a two ended optimization, we'd want to optimize for the case// where there are few changes and brute force the comparison instead of// going for the Map. It'd like to explore hitting that path first in// forward-only mode and only go for the Map once we notice that we need// lots of look ahead. This doesn't handle reversal as well as two ended// search but that's unusual. Besides, for the two ended optimization to// work on Iterables, we'd need to copy the whole set.// In this first iteration, we'll just live with hitting the bad case// (adding everything to a Map) in for every insert/move.// If you change this code, also update reconcileChildrenIterator() which// uses the same algorithm.} ...