diff算法核心原理

// diff算法核心原理
// 每一次遍歷是一個循環(huán), 每個循環(huán)執(zhí)行五次操作, 分別是
// 1、oldstart 與 newstart 比較
// 2、oldend 與 newend 比較
// 3、oldstart 與 newend 比較
// 4、oldend 與 newstart 比較 
// 5、newstart 與 oldAll(所有舊節(jié)點) 比較 (前面4次都不匹配時才進入第5次)

// 循環(huán)(1)
// oldstart 與 newstrat一致, oldstart和newstart index向中間+1, dom不改變
// dom        1, 2, 3, 4, 5, 6, 7, 8, 9, 10
//         oldstart                   oldend
//            |                           |
// oldVNode   1, 2, 3, 4, 5, 6, 7, 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//            |                            |
//        newstrat                       newend

// oldend與newend一致 index向中間+1, dom不改變
// dom        1, 2, 3, 4, 5, 6, 7, 8, 9, 10
//            oldstart             oldend
//               |                    |
// oldVNode   1, 2, 3, 4, 5, 6, 7, 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//               |                     |
//           newstrat                newend

// 循環(huán)(2)
// oldstart和newend相同 
// dom        1, 2, 3, 4, 5, 6, 7, 8, 9, 10
//            oldstart             oldend
//               |                    |
// oldVNode   1, 2, 3, 4, 5, 6, 7, 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//               |                     |
//           newstrat                newend

// 將oldstart放到oldend后面, dom改變, oldstart和newend index向中間+1
// dom        1, 3, 4, 5, 6, 7, 8, 9, 2, 10
//              oldstart            oldend
//                  |                 |
// oldVNode   1, 2, 3, 4, 5, 6, 7, 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//               |                  |
//           newstrat             newend

// newstrat和oldend相同, 將oldend放到oldstart前面 
// dom改變, newstrat和oldend index向中間+1
// dom        1, 9, 3, 4, 5, 6, 7, 8, 2, 10
//              oldstart        oldend
//                  |              |
// oldVNode   1, 2, 3, 4, 5, 6, 7, 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//                  |               |
//                newstrat        newend

// 循環(huán)(3)
// 發(fā)現(xiàn)前4次都匹配不上, 進入第5次 newstart 與 所有舊節(jié)點 比較
// 發(fā)現(xiàn)老節(jié)點有7這個節(jié)點, 把節(jié)點7 放到oldstart之前
// dom改變, newstart index向中間+1
// dom        1, 9, 7, 3, 4, 5, 6, 8, 2, 10
//               oldstart                      oldend
//                  |                             |
// oldVNode   1, 2, 3, 4, 5, 6, 7(標記undefined), 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//                      |           |
//                   newstrat     newend

// 循環(huán)(4)
// 發(fā)現(xiàn)前4次都匹配不上, 進入第5次 newstart 與 所有舊節(jié)點 比較
// 發(fā)現(xiàn)沒用11這個節(jié)點 11節(jié)點是新增, 將新增節(jié)點放在oldstart前面
// dom改變, newstart index向中間+1
// dom        1, 9, 7, 11, 3, 4, 5, 6, 8, 2, 10
//               oldstart                      oldend
//                  |                             |
// oldVNode   1, 2, 3, 4, 5, 6, 7(標記undefined), 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//                         |        |
//                      newstrat  newend

// 循環(huán)(5) 和 循環(huán)(6) 和 循環(huán)(7)
// 發(fā)現(xiàn)前oldstart 與 newstart匹配
// dom不改變, oldstart和newstart index向中間+1
// dom        1, 9, 7, 11, 3, 4, 5, 6, 8, 2, 10
//                       oldstart               oldend
//                           |                    |
// oldVNode   1, 2, 3, 4, 5, 6, 7(標記undefined), 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//                                  ||
//                           newstrat newend

// 循環(huán)(8)
// 遍歷結(jié)束 
// 當oldstart > oldend 有新增節(jié)點 直接新增
// 當newstart > newend 有刪除節(jié)點 刪除
// 當前我們滿足(newstart > newend) 刪除節(jié)點8 , 7有特殊標記(改變了位置)
// dom改變 (完成) 與 newVnode匹配
// dom        1, 9, 7, 11, 3, 4, 5, 6, 2, 10 
//                          oldstart           oldend
//                              |                 |
// oldVNode   1, 2, 3, 4, 5, 6, 7(標記undefined), 8, 9, 10
// newVNode   1, 9, 7, 11, 3, 4, 5, 6, 2, 10
//                                  |  |
//                             newend  newstrat 
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容