diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js index 6649f55bb..66fa3f17e 100644 --- a/src/core/wrapper/layout.js +++ b/src/core/wrapper/layout.js @@ -578,76 +578,6 @@ export class Layout extends Widget { let before; let updated; const children = {}; - each(oldCh, (i, child) => { - child = this._getOptions(child); - const key = isNull(child.key) ? i : child.key; - if (isKey(key)) { - children[key] = this._children[this._getChildName(i)]; - } - }); - - while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { - if (isNull(oldStartVnode)) { - oldStartVnode = oldCh[++oldStartIdx]; - } else if (isNull(oldEndVnode)) { - oldEndVnode = oldCh[--oldEndIdx]; - } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) { - const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx); - updated = willUpdate || updated; - children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; - oldStartVnode = oldCh[++oldStartIdx]; - newStartVnode = newCh[++newStartIdx]; - } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) { - const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx); - updated = willUpdate || updated; - children[isNull(oldEndVnode.key) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; - oldEndVnode = oldCh[--oldEndIdx]; - newEndVnode = newCh[--newEndIdx]; - } else if (sameVnode(oldStartVnode, newEndVnode)) { - const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx); - updated = willUpdate || updated; - children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; - insertBefore(oldStartVnode, oldEndVnode, true); - oldStartVnode = oldCh[++oldStartIdx]; - newEndVnode = newCh[--newEndIdx]; - } else if (sameVnode(oldEndVnode, newStartVnode)) { - const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx); - updated = willUpdate || updated; - children[isNull(oldEndVnode) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; - insertBefore(oldEndVnode, oldStartVnode); - oldEndVnode = oldCh[--oldEndIdx]; - newStartVnode = newCh[++newStartIdx]; - } else { - const sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx); - if (isNull(sameOldVnode[0])) { // 不存在就把新的放到左边 - const node = addNode(newStartVnode, newStartIdx, context); - insertBefore(node, oldStartVnode); - } else { // 如果新节点在旧节点区间中存在就复用一下 - const sameOldIndex = sameOldVnode[1]; - const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx); - updated = willUpdate || updated; - children[isNull(sameOldVnode[0].key) ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(sameOldIndex)]; - oldCh[sameOldIndex] = undefined; - insertBefore(sameOldVnode[0], oldStartVnode); - } - newStartVnode = newCh[++newStartIdx]; - } - } - if (oldStartIdx > oldEndIdx) { - before = isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1]; - addVnodes(before, newCh, newStartIdx, newEndIdx, context); - } else if (newStartIdx > newEndIdx) { - removeVnodes(oldCh, oldStartIdx, oldEndIdx); - } - - this._children = {}; - each(newCh, (i, child) => { - const node = this._getOptions(child); - const key = isNull(node.key) ? i : node.key; - children[key]._setParent && children[key]._setParent(this); - children[key]._mount(); - this._children[this._getChildName(i)] = children[key]; - }); const sameVnode = (vnode1, vnode2, oldIndex, newIndex) => { vnode1 = this._getOptions(vnode1); @@ -720,6 +650,77 @@ export class Layout extends Widget { return [found, findIndex]; }; + each(oldCh, (i, child) => { + child = this._getOptions(child); + const key = isNull(child.key) ? i : child.key; + if (isKey(key)) { + children[key] = this._children[this._getChildName(i)]; + } + }); + + while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { + if (isNull(oldStartVnode)) { + oldStartVnode = oldCh[++oldStartIdx]; + } else if (isNull(oldEndVnode)) { + oldEndVnode = oldCh[--oldEndIdx]; + } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) { + const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx); + updated = willUpdate || updated; + children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; + oldStartVnode = oldCh[++oldStartIdx]; + newStartVnode = newCh[++newStartIdx]; + } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) { + const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx); + updated = willUpdate || updated; + children[isNull(oldEndVnode.key) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; + oldEndVnode = oldCh[--oldEndIdx]; + newEndVnode = newCh[--newEndIdx]; + } else if (sameVnode(oldStartVnode, newEndVnode)) { + const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx); + updated = willUpdate || updated; + children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; + insertBefore(oldStartVnode, oldEndVnode, true); + oldStartVnode = oldCh[++oldStartIdx]; + newEndVnode = newCh[--newEndIdx]; + } else if (sameVnode(oldEndVnode, newStartVnode)) { + const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx); + updated = willUpdate || updated; + children[isNull(oldEndVnode) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; + insertBefore(oldEndVnode, oldStartVnode); + oldEndVnode = oldCh[--oldEndIdx]; + newStartVnode = newCh[++newStartIdx]; + } else { + const sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx); + if (isNull(sameOldVnode[0])) { // 不存在就把新的放到左边 + const node = addNode(newStartVnode, newStartIdx, context); + insertBefore(node, oldStartVnode); + } else { // 如果新节点在旧节点区间中存在就复用一下 + const sameOldIndex = sameOldVnode[1]; + const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx); + updated = willUpdate || updated; + children[isNull(sameOldVnode[0].key) ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(sameOldIndex)]; + oldCh[sameOldIndex] = undefined; + insertBefore(sameOldVnode[0], oldStartVnode); + } + newStartVnode = newCh[++newStartIdx]; + } + } + if (oldStartIdx > oldEndIdx) { + before = isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1]; + addVnodes(before, newCh, newStartIdx, newEndIdx, context); + } else if (newStartIdx > newEndIdx) { + removeVnodes(oldCh, oldStartIdx, oldEndIdx); + } + + this._children = {}; + each(newCh, (i, child) => { + const node = this._getOptions(child); + const key = isNull(node.key) ? i : node.key; + children[key]._setParent && children[key]._setParent(this); + children[key]._mount(); + this._children[this._getChildName(i)] = children[key]; + }); + return updated; }