Skip to content

Commit

Permalink
feat: element diff
Browse files Browse the repository at this point in the history
  • Loading branch information
@cuixiaorui
cuixiaorui committed Dec 14, 2021
1 parent 7337732 commit a272f2b
Show file tree
Hide file tree
Showing 6 changed files with 467 additions and 122 deletions.
241 changes: 165 additions & 76 deletions example/patchChildren/PatchChildren.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,121 +2,210 @@ import { h } from "../../lib/mini-vue.esm.js";
import { ref } from "../../lib/mini-vue.esm.js";

const isChange = ref(false);
// 默认是顺序不变，新旧节点的数量不变，属性不变
// 第一种情况：（从前往后依次对比）
// 属性变了
// const prevChildren = [h("div", { key: "a", id: "old-a" }, "a")];
// const nextChildren = [h("div", { key: "a", id: "new-a" }, "a")];

//第二种情况：
// 新节点的数量增加了一个
// const prevChildren = [h("div", { key: "a", id: "old-a" }, "a")];

// 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("div", { key: "a", id: "new-a" }, "a"),
// h("div", { key: "b" }, "b"),
// h("p", { key: "A" }, "A"),
// h("p", { key: "B" }, "B"),
// h("p", { key: "D" }, "D"),
// h("p", { key: "E" }, "E"),
// ];

// 新节点数量增加两个
// const prevChildren = [h("div", { key: "a", id: "old-a" }, "a")];
// 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("div", { key: "a", id: "new-a" }, "a"),
// h("div", { key: "b" }, "b"),
// h("div", { key: "c" }, "c"),
// h("p", { key: "D" }, "D"),
// h("p", { key: "E" }, "E"),
// h("p", { key: "B" }, "B"),
// h("p", { key: "C" }, "C"),
// ];

// 第三种情况：
// 新节点的数量减少了一个
// const prevChildren = [
// h("div", { key: "a" }, "a"),
// h("div", { key: "b" }, "b"),
// h("div", { 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"),
// ];

// const nextChildren = [h("div", { key: "a" }, "a"), h("div", { key: "b" }, "b")];
// 右侧
// (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: "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("div", { key: "a" }, "a"),
// h("div", { key: "b" }, "b"),
// h("div", { key: "c" }, "c"),
// 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")];

// const nextChildren = [h("div", { key: "a" }, "a")];
// 右侧
// a (b c)
// (b c)
// i = 0, e1 = 0, e2 = -1

// 第四种情况：(从后往前依次对比)
// a (b)
// (b)
// const prevChildren = [
// h("div", { key: "a" }, "a"),
// h("div", { key: "b", id: "old-id" }, "b"),
// h("p", { key: "A" }, "A"),
// h("p", { key: "B" }, "B"),
// h("p", { key: "C" }, "C"),
// ];
// const nextChildren = [h("div", { key: "b", id: "new-id" }, "b")];
// 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 也发生了变化

// 第五种情况
// 顺序变了,但是新老节点都存在
// 先只验证节点的 props 是否正常更新
// todo: 还需要移动位置
// a,b
// b,a
// const prevChildren = [
// h("div", { key: "a", id: "old-a" }, "a"),
// h("div", { key: "b", id: "old-b" }, "b"),
// 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("div", { key: "b", id: "new-b" }, "b"),
// h("div", { key: "a", id: "new-a" }, "a"),
// 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"),
// ];

// 第六种情况
// 顺序变了，老节点在 newChildren 里面不存在
// 还需要处理一下位置的移动
// a,b,c
// b,a
// 5.1.1
// a,b,(c,e,d),f,g
// a,b,(e,c),f,g
// 中间部分，老的比新的多， 那么多出来的直接就可以被干掉(优化删除逻辑)
// const prevChildren = [
// h("div", { key: "a", id: "old-a" }, "a"),
// h("div", { key: "b", id: "old-b" }, "b"),
// h("div", { key: "c", id: "old-c" }, "c"),
// 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("div", { key: "b", id: "new-b" }, "b"),
// h("div", { key: "a", id: "new-a" }, "a"),
// 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"),
// ];

// 第七种情况
// 顺序变了，新节点在 oldChildren 里面不存在
// 需要创建新节点
// 还需要移动元素位置（ anchor 有值的情况下 ）
// 2 移动 (节点存在于新的和老的里面，但是位置变了)

// 2.1
// a,b,(c,d,e),f,g
// a,b,(e,c,d),f,g
// 最长子序列： [1,2]

// const prevChildren = [
// h("div", { key: "a", id: "old-a" }, "a"),
// h("div", { key: "b", id: "old-b" }, "b"),
// 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("div", { key: "b", id: "new-b" }, "b"),
// h("div", { key: "a", id: "new-a" }, "a"),
// h("div", { key: "c", id: "new-c" }, "c"),
// 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"),
// ];

// 第八种情况
// 移动元素位置（ anchor 没有值的情况下 ）
// 要移动的元素是属于最后一个位置
// 2.2
// a,b,(c,d,e,z),f,g
// a,b,(d,c,y,e),f,g
// 最长子序列： [1,3]

// const prevChildren = [
// h("div", { key: "a", id: "old-a" }, "a"),
// h("div", { key: "b", id: "old-b" }, "b"),
// 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("div", { key: "b", id: "old-b" }, "b"),
// h("div", { key: "a", id: "old-a" }, "a"),
// 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"),
// ];

// 在左侧添加新元素
// (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 = [
// 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 {
Expand Down
Loading

0 comments on commit a272f2b

Please sign in to comment.