更新 element 的 children - 双端对比diff 算法（1）

daoyking · Jun 16, 2022 · a0b701b · a0b701b
1 parent 9197be5
commit a0b701b
Show file tree

Hide file tree

Showing 7 changed files with 574 additions and 93 deletions.
diff --git a/example/PatchChildren/App.js b/example/PatchChildren/App.js
@@ -0,0 +1,30 @@
+import { h } from '../../lib/guide-mini-vue.esm.js'
+
+import ArrayToText from './ArrayToText.js'
+import TextToText from './TextToText.js'
+import TextToArray from './TextToArray.js'
+import ArrayToArray from './ArrayToArray.js'
+
+export const App = {
+  neme: 'App',
+  setup() {},
+  render() {
+    return h(
+      'div',
+      {
+        tId: 1,
+      },
+      [
+        h('p', {}, '主页'),
+        // old array -> new text
+        // h(ArrayToText),
+        // old text -> new text
+        // h(TextToText),
+        // old text -> new array
+        // h(TextToArray),
+        // old array -> new array
+        h(ArrayToArray),
+      ]
+    )
+  }
+}
diff --git a/example/PatchChildren/ArrayToArray.js b/example/PatchChildren/ArrayToArray.js
@@ -0,0 +1,227 @@
+
+
+import { h,ref } from '../../lib/guide-mini-vue.esm.js'
+// const nextChildren = [h('div', {}, 'C'), h('div', {}, 'D')]
+// const prevChildren = [h('div', {}, 'A'), h('div', {}, 'B')]
+
+// 1. 左侧的对比
+// (a b) c
+// (a b) d e
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+// ];
+// const nextChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "E" }, "E"),
+// ];
+
+// 2. 右侧的对比
+// a (b c)
+// d e (b c)
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+// ];
+// const nextChildren = [
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+// ];
+
+// 3. 新的比老的长
+//     创建新的
+// 左侧
+// (a b)
+// (a b) c
+// i = 2, e1 = 1, e2 = 2
+// const prevChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
+// const nextChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+// ];
+
+// 右侧
+// (a b)
+// c (a b)
+// i = 0, e1 = -1, e2 = 0
+// const prevChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
+// const nextChildren = [
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "C" }, "C"),
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+// ];
+
+// 4. 老的比新的长
+//     删除老的
+// 左侧
+// (a b) c
+// (a b)
+// i = 2, e1 = 2, e2 = 1
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+// ];
+// const nextChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
+
+// 右侧
+// a (b c)
+// (b c)
+// i = 0, e1 = 0, e2 = -1
+
+const prevChildren = [
+  h("p", { key: "A" }, "A"),
+  h("p", { key: "B" }, "B"),
+  h("p", { key: "C" }, "C"),
+];
+const nextChildren = [h("p", { key: "B" }, "B"), h("p", { key: "C" }, "C")];
+
+// 5. 对比中间的部分
+// 删除老的  (在老的里面存在，新的里面不存在)
+// 5.1
+// a,b,(c,d),f,g
+// a,b,(e,c),f,g
+// D 节点在新的里面是没有的 - 需要删除掉
+// C 节点 props 也发生了变化
+
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C", id: "c-prev" }, "C"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// const nextChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "C", id:"c-next" }, "C"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// 5.1.1
+// a,b,(c,e,d),f,g
+// a,b,(e,c),f,g
+// 中间部分，老的比新的多， 那么多出来的直接就可以被干掉(优化删除逻辑)
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C", id: "c-prev" }, "C"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// const nextChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "C", id:"c-next" }, "C"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// 2 移动 (节点存在于新的和老的里面，但是位置变了)
+
+// 2.1
+// a,b,(c,d,e),f,g
+// a,b,(e,c,d),f,g
+// 最长子序列： [1,2]
+
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// const nextChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "C" }, "C"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// 2.2
+// a,b,(c,d,e,z),f,g
+// a,b,(d,c,y,e),f,g
+// 最长子序列： [1,3]
+
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "Z" }, "Z"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// const nextChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "C" }, "C"),
+//   h("p", { key: "Y" }, "Y"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// 3. 创建新的节点
+// a,b,(c,e),f,g
+// a,b,(e,c,d),f,g
+// d 节点在老的节点中不存在，新的里面存在，所以需要创建
+// const prevChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "C" }, "C"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+// const nextChildren = [
+//   h("p", { key: "A" }, "A"),
+//   h("p", { key: "B" }, "B"),
+//   h("p", { key: "E" }, "E"),
+//   h("p", { key: "C" }, "C"),
+//   h("p", { key: "D" }, "D"),
+//   h("p", { key: "F" }, "F"),
+//   h("p", { key: "G" }, "G"),
+// ];
+
+export default {
+  name: 'ArrayToArray',
+  setup() {
+    const isChange = ref(false)
+    window.isChange = isChange
+
+    return {
+      isChange
+    }
+  },
+  render() {
+    const self = this
+    return self.isChange ? h('div', {}, nextChildren) : h('div', {}, prevChildren)
+  }
+}