@viewfly/core 1.0.0-alpha.12 → 1.0.0-alpha.14

package/bundles/index.d.ts

@@ -113,7 +113,7 @@ interface Prop {
 declare const Prop: PropDecorator;
 
 declare const THROW_IF_NOT_FOUND: any;
-declare class NullInjector extends Injector {
+declare class NullInjector implements Injector {
     parentInjector: null;
     get(token: any, notFoundValue?: any, _?: InjectFlags): any;
 }
@@ -167,9 +167,8 @@ declare function normalizeProvider(provider: Provider): NormalizedProvider;
 /**
  * 反射注入器
  */
-declare class ReflectiveInjector extends Injector {
+declare class ReflectiveInjector implements Injector {
     parentInjector: Injector | null;
-    protected staticProviders: Provider[];
     protected scope?: Scope | undefined;
     protected normalizedProviders: NormalizedProvider[];
     protected recordValues: Map<Type<any> | AbstractType<any> | InjectionToken<any>, any>;
@@ -211,45 +210,6 @@ declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = Nativ
     abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, isSvg: boolean): void;
 }
 
-interface ListenDelegate {
-    delegate: () => any;
-    listenFn: ((...args: any[]) => any) | void;
-}
-interface TextAtom {
-    type: 'text';
-    index: number;
-    jsxNode: string;
-    nativeNode: NativeNode | null;
-    child: Atom | null;
-    sibling: Atom | null;
-    isSvg: boolean;
-}
-interface ElementAtom {
-    type: 'element';
-    index: number;
-    jsxNode: JSXNode<string>;
-    nativeNode: NativeNode | null;
-    child: Atom | null;
-    sibling: Atom | null;
-    isSvg: boolean;
-}
-interface ComponentAtom {
-    type: 'component';
-    index: number;
-    jsxNode: JSXNode<JSXInternal.ComponentSetup> | Component;
-    nativeNode: NativeNode | null;
-    child: Atom | null;
-    sibling: Atom | null;
-    isSvg: boolean;
-}
-type Atom = TextAtom | ElementAtom | ComponentAtom;
-interface ComponentView {
-    atom: Atom;
-    host: NativeNode;
-    isParent: boolean;
-    rootHost: NativeNode;
-}
-
 interface Props {
     children?: JSXInternal.ViewNode | JSXInternal.ViewNode[];
 }
@@ -261,7 +221,6 @@ interface JSXNode<T = string | JSXInternal.ComponentSetup> {
     type: T;
     props: Props & Record<string, any>;
     key?: Key;
-    on?: Record<string, ListenDelegate>;
 }
 declare const JSXNodeFactory: {
     createNode<T = string | JSXInternal.ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): JSXNode<T>;
@@ -560,6 +519,50 @@ declare global {
     }
 }
 
+declare const TextAtomType: unique symbol;
+declare const ElementAtomType: unique symbol;
+declare const ComponentAtomType: unique symbol;
+interface TextAtom {
+    type: typeof TextAtomType;
+    index: number;
+    jsxNode: string;
+    nativeNode: NativeNode | null;
+    child: Atom | null;
+    sibling: Atom | null;
+    isSvg: boolean;
+    update: null | ((insertOffset: number) => void);
+    next: Atom | null;
+}
+interface ElementAtom {
+    type: typeof ElementAtomType;
+    index: number;
+    jsxNode: JSXNode<string>;
+    nativeNode: NativeNode | null;
+    child: Atom | null;
+    sibling: Atom | null;
+    isSvg: boolean;
+    update: null | ((insertOffset: number) => void);
+    next: Atom | null;
+}
+interface ComponentAtom {
+    type: typeof ComponentAtomType;
+    index: number;
+    jsxNode: JSXNode<JSXInternal.ComponentSetup> | Component;
+    nativeNode: NativeNode | null;
+    child: Atom | null;
+    sibling: Atom | null;
+    isSvg: boolean;
+    update: null | ((insertOffset: number) => void);
+    next: Atom | null;
+}
+type Atom = TextAtom | ElementAtom | ComponentAtom;
+interface ComponentView {
+    atom: Atom;
+    host: NativeNode;
+    isParent: boolean;
+    rootHost: NativeNode;
+}
+
 /**
  * Viewfly 配置项
  */

package/bundles/index.esm.js

@@ -234,9 +234,8 @@ const THROW_IF_NOT_FOUND = {
 const nullInjectorErrorFn = (token) => {
     return makeError('NullInjector')(`No provide for \`${stringify(token)}\`!`);
 };
-class NullInjector extends Injector {
+class NullInjector {
     constructor() {
-        super(...arguments);
         this.parentInjector = null;
     }
     /* eslint-disable-next-line */
@@ -411,11 +410,9 @@ const provideScopeError = (token) => {
 /**
  * 反射注入器
  */
-class ReflectiveInjector extends Injector {
+class ReflectiveInjector {
     constructor(parentInjector, staticProviders, scope) {
-        super();
         this.parentInjector = parentInjector;
-        this.staticProviders = staticProviders;
         this.scope = scope;
         this.recordValues = new Map();
         this.normalizedProviders = staticProviders.map(provide => {
@@ -634,6 +631,9 @@ function styleToObject(style) {
     });
     return obj;
 }
+const TextAtomType = Symbol('Text');
+const ElementAtomType = Symbol('Element');
+const ComponentAtomType = Symbol('Component');
 
 const componentSetupStack = [];
 const signalDepsStack = [];
@@ -741,8 +741,9 @@ class Component extends ReflectiveInjector {
         };
     }
     update(newProps, forceUpdate = false) {
+        const oldProps = this.props;
         if (!forceUpdate) {
-            const { add, remove, replace } = getObjectChanges(newProps, this.props);
+            const { add, remove, replace } = getObjectChanges(newProps, oldProps);
             if (add.length || remove.length || replace.length) {
                 this.invokePropsChangedHooks(newProps);
             }
@@ -766,7 +767,7 @@ class Component extends ReflectiveInjector {
             }
         }
         if (typeof this.instance.$useMemo === 'function') {
-            if (this.instance.$useMemo(newProps, this.props)) {
+            if (this.instance.$useMemo(newProps, oldProps)) {
                 return this.template;
             }
         }
@@ -1291,13 +1292,15 @@ function createRenderer(component, nativeRenderer) {
         if (isInit) {
             isInit = false;
             const atom = {
-                type: 'component',
+                type: ComponentAtomType,
                 index: 0,
                 jsxNode: component,
                 sibling: null,
                 child: null,
                 nativeNode: null,
-                isSvg: false
+                isSvg: false,
+                update: null,
+                next: null
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1312,12 +1315,12 @@ function createRenderer(component, nativeRenderer) {
 }
 function buildView(nativeRenderer, parentComponent, atom, context) {
     const { jsxNode, type } = atom;
-    if (type === 'component') {
+    if (type === ComponentAtomType) {
         const component = new Component(parentComponent, jsxNode.type, jsxNode.props, jsxNode.key);
         atom.jsxNode = component;
         componentRender(nativeRenderer, component, atom, context);
     }
-    else if (type === 'element') {
+    else if (type === ElementAtomType) {
         createElement(nativeRenderer, atom, parentComponent, context);
     }
     else {
@@ -1367,72 +1370,61 @@ function applyChanges(nativeRenderer, component) {
     }
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
-    const commits = [];
-    function changeOffset() {
-        offset++;
-    }
-    while (newAtom) {
-        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
-        newAtom = newAtom.sibling;
-    }
-    let dirtyDiffAtom = oldAtom;
-    while (dirtyDiffAtom) {
-        cleanView(nativeRenderer, dirtyDiffAtom, true);
-        dirtyDiffAtom = dirtyDiffAtom.sibling;
-    }
-    let offset = 0;
-    for (let i = 0; i < commits.length; i++) {
-        const commit = commits[i];
-        while (oldAtom) {
-            if (oldAtom.index <= i) {
-                offset--;
-                oldAtom = oldAtom.sibling;
-                continue;
-            }
-            break;
-        }
-        commit(offset);
-    }
-}
-function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
-    const startDiffAtom = oldAtom;
-    const { jsxNode: newJsxNode, type } = newAtom;
-    const key = newJsxNode.key;
-    let prev = null;
+    let updateAtom = newAtom;
+    let insertOffset = 0;
+    let deleteOffset = 0;
     while (oldAtom) {
-        const diffIndex = oldAtom.index;
-        if (type === oldAtom.type) {
-            let commit;
-            if (type === 'text') {
-                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
-            }
-            else {
-                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
-                if (diffKey !== key || newJsxNode.type !== diffType) {
-                    prev = oldAtom;
-                    oldAtom = oldAtom.sibling;
-                    continue;
-                }
-                if (type === 'component') {
-                    commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
+        const startDiffAtom = newAtom;
+        let prev = null;
+        let isUsed = false;
+        while (newAtom) {
+            const newAtomType = newAtom.type;
+            if (oldAtom.type === newAtomType) {
+                if (newAtomType === TextAtomType) {
+                    newAtom.update = updateText(newAtom, oldAtom, nativeRenderer, context);
+                    isUsed = true;
                 }
                 else {
-                    commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
+                    const { key: newKey, type: newType } = newAtom.jsxNode;
+                    const { key: oldKey, type: oldType } = oldAtom.jsxNode;
+                    if (newType === oldType && newKey === oldKey) {
+                        if (newAtomType === ComponentAtomType) {
+                            newAtom.update = updateComponent(newAtom, oldAtom, deleteOffset, nativeRenderer, context);
+                        }
+                        else {
+                            newAtom.update = updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent);
+                        }
+                        isUsed = true;
+                    }
                 }
             }
-            commits.push(commit);
-            const next = oldAtom.sibling;
-            if (!prev) {
-                return next;
+            if (isUsed) {
+                const sibling = newAtom.next || newAtom.sibling;
+                if (prev) {
+                    prev.next = sibling;
+                }
+                newAtom = newAtom === startDiffAtom ? sibling : startDiffAtom;
+                break;
             }
-            prev.sibling = next;
-            return startDiffAtom;
+            prev = newAtom;
+            newAtom = newAtom.next || newAtom.sibling;
+        }
+        if (!isUsed) {
+            newAtom = startDiffAtom;
+            deleteOffset++;
+            cleanView(nativeRenderer, oldAtom, true);
         }
-        prev = oldAtom;
         oldAtom = oldAtom.sibling;
     }
-    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
-    return startDiffAtom;
+    function changeOffset() {
+        insertOffset++;
+    }
+    while (updateAtom) {
+        const update = updateAtom.update || createNewView(updateAtom, nativeRenderer, context, parentComponent, changeOffset);
+        update(insertOffset);
+        updateAtom.next = updateAtom.update = null;
+        updateAtom = updateAtom.sibling;
+    }
 }
 function createNewView(start, nativeRenderer, context, parentComponent, effect) {
     return function () {
@@ -1451,10 +1443,10 @@ function updateText(newAtom, oldAtom, nativeRenderer, context) {
         context.isParent = false;
     };
 }
-function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer, context, parentComponent) {
-    return function (offset) {
+function updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent) {
+    return function (insertOffset) {
         newAtom.nativeNode = oldAtom.nativeNode;
-        if (expectIndex - offset !== oldIndex) {
+        if (newAtom.index - insertOffset !== oldAtom.index - deleteOffset) {
             insertNode(nativeRenderer, newAtom, context);
         }
         context.host = newAtom.nativeNode;
@@ -1462,8 +1454,8 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
     };
 }
-function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
-    return function (offset) {
+function updateComponent(newAtom, reusedAtom, deleteOffset, nativeRenderer, context) {
+    return function (insertOffset) {
         const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
         const oldTemplate = component.template;
@@ -1473,7 +1465,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
-            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
+            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, newAtom.index - insertOffset !== reusedAtom.index - deleteOffset);
             updateView(nativeRenderer, component);
             return;
         }
@@ -1531,7 +1523,7 @@ function cleanView(nativeRenderer, atom, needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
             needClean = false;
         }
-        if (atom.type === 'element') {
+        if (atom.type === ElementAtomType) {
             const ref = atom.jsxNode.props[refKey];
             applyRefs(ref, atom.nativeNode, false);
         }
@@ -1560,42 +1552,17 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
-    const atom = {
-        type: 'component',
-        index: prevAtom.index + 1,
-        jsxNode,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
-    };
-    prevAtom.sibling = atom;
-    return atom;
-}
-function createChainByJSXText(jsxNode, prevAtom, isSvg) {
+function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
     const atom = {
-        type: 'text',
+        type,
         index: prevAtom.index + 1,
         jsxNode,
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg
-    };
-    prevAtom.sibling = atom;
-    return atom;
-}
-function createChainByJSXElement(element, prevAtom, isSvg) {
-    isSvg = isSvg || element.type === 'svg';
-    const atom = {
-        type: 'element',
-        index: prevAtom.index + 1,
-        jsxNode: element,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
+        isSvg,
+        update: null,
+        next: null
     };
     prevAtom.sibling = atom;
     return atom;
@@ -1604,7 +1571,7 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXText(jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, prevAtom, isSvg);
         }
         if (Array.isArray(jsxNode)) {
             return createChainByChildren(jsxNode, prevAtom, isSvg);
@@ -1612,13 +1579,13 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXElement(jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ElementAtomType, jsxNode, prevAtom, isSvg || jsxNode.type === 'svg');
             }
             else if (nodeType === 'function') {
-                return createChainByJSXComponent(jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, prevAtom, isSvg);
             }
         }
-        return createChainByJSXText(String(jsxNode), prevAtom, isSvg);
+        return createChainByJSXNode(TextAtomType, String(jsxNode), prevAtom, isSvg);
     }
     return prevAtom;
 }
@@ -1673,7 +1640,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                bindEvent(nativeRenderer, jsxNode, key, nativeNode, listener, isSvg);
+                nativeRenderer.listen(nativeNode, key, listener, isSvg);
             }
             continue;
         }
@@ -1711,7 +1678,6 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
-    newVNode.on = oldVNode.on;
     newAtom.child = oldAtom.child;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
@@ -1731,9 +1697,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                const oldOn = oldVNode.on;
-                nativeRenderer.unListen(nativeNode, key, oldOn[key].delegate, isSvg);
-                Reflect.deleteProperty(oldOn, key);
+                nativeRenderer.unListen(nativeNode, key, value, isSvg);
             }
             continue;
         }
@@ -1777,7 +1741,8 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             continue;
         }
         if (listenerReg.test(key)) {
-            newVNode.on[key].listenFn = newValue;
+            nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
+            nativeRenderer.listen(nativeNode, key, newValue, isSvg);
             continue;
         }
         if (key === refKey) {
@@ -1806,7 +1771,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                bindEvent(nativeRenderer, newVNode, key, nativeNode, value, isSvg);
+                nativeRenderer.listen(nativeNode, key, value, isSvg);
             }
             continue;
         }
@@ -1829,20 +1794,6 @@ function applyRefs(refs, nativeNode, binding) {
         }
     }
 }
-function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
-    let on = vNode.on;
-    if (!on) {
-        vNode.on = on = {};
-    }
-    const delegateObj = {
-        delegate(...args) {
-            return delegateObj.listenFn.apply(this, args);
-        },
-        listenFn
-    };
-    on[key] = delegateObj;
-    nativeRenderer.listen(nativeNode, key, delegateObj.delegate, isSvg);
-}
 
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知

package/bundles/index.js

@@ -236,9 +236,8 @@ const THROW_IF_NOT_FOUND = {
 const nullInjectorErrorFn = (token) => {
     return makeError('NullInjector')(`No provide for \`${stringify(token)}\`!`);
 };
-class NullInjector extends Injector {
+class NullInjector {
     constructor() {
-        super(...arguments);
         this.parentInjector = null;
     }
     /* eslint-disable-next-line */
@@ -413,11 +412,9 @@ const provideScopeError = (token) => {
 /**
  * 反射注入器
  */
-class ReflectiveInjector extends Injector {
+class ReflectiveInjector {
     constructor(parentInjector, staticProviders, scope) {
-        super();
         this.parentInjector = parentInjector;
-        this.staticProviders = staticProviders;
         this.scope = scope;
         this.recordValues = new Map();
         this.normalizedProviders = staticProviders.map(provide => {
@@ -636,6 +633,9 @@ function styleToObject(style) {
     });
     return obj;
 }
+const TextAtomType = Symbol('Text');
+const ElementAtomType = Symbol('Element');
+const ComponentAtomType = Symbol('Component');
 
 const componentSetupStack = [];
 const signalDepsStack = [];
@@ -743,8 +743,9 @@ class Component extends ReflectiveInjector {
         };
     }
     update(newProps, forceUpdate = false) {
+        const oldProps = this.props;
         if (!forceUpdate) {
-            const { add, remove, replace } = getObjectChanges(newProps, this.props);
+            const { add, remove, replace } = getObjectChanges(newProps, oldProps);
             if (add.length || remove.length || replace.length) {
                 this.invokePropsChangedHooks(newProps);
             }
@@ -768,7 +769,7 @@ class Component extends ReflectiveInjector {
             }
         }
         if (typeof this.instance.$useMemo === 'function') {
-            if (this.instance.$useMemo(newProps, this.props)) {
+            if (this.instance.$useMemo(newProps, oldProps)) {
                 return this.template;
             }
         }
@@ -1293,13 +1294,15 @@ function createRenderer(component, nativeRenderer) {
         if (isInit) {
             isInit = false;
             const atom = {
-                type: 'component',
+                type: ComponentAtomType,
                 index: 0,
                 jsxNode: component,
                 sibling: null,
                 child: null,
                 nativeNode: null,
-                isSvg: false
+                isSvg: false,
+                update: null,
+                next: null
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1314,12 +1317,12 @@ function createRenderer(component, nativeRenderer) {
 }
 function buildView(nativeRenderer, parentComponent, atom, context) {
     const { jsxNode, type } = atom;
-    if (type === 'component') {
+    if (type === ComponentAtomType) {
         const component = new Component(parentComponent, jsxNode.type, jsxNode.props, jsxNode.key);
         atom.jsxNode = component;
         componentRender(nativeRenderer, component, atom, context);
     }
-    else if (type === 'element') {
+    else if (type === ElementAtomType) {
         createElement(nativeRenderer, atom, parentComponent, context);
     }
     else {
@@ -1369,72 +1372,61 @@ function applyChanges(nativeRenderer, component) {
     }
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
-    const commits = [];
-    function changeOffset() {
-        offset++;
-    }
-    while (newAtom) {
-        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
-        newAtom = newAtom.sibling;
-    }
-    let dirtyDiffAtom = oldAtom;
-    while (dirtyDiffAtom) {
-        cleanView(nativeRenderer, dirtyDiffAtom, true);
-        dirtyDiffAtom = dirtyDiffAtom.sibling;
-    }
-    let offset = 0;
-    for (let i = 0; i < commits.length; i++) {
-        const commit = commits[i];
-        while (oldAtom) {
-            if (oldAtom.index <= i) {
-                offset--;
-                oldAtom = oldAtom.sibling;
-                continue;
-            }
-            break;
-        }
-        commit(offset);
-    }
-}
-function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
-    const startDiffAtom = oldAtom;
-    const { jsxNode: newJsxNode, type } = newAtom;
-    const key = newJsxNode.key;
-    let prev = null;
+    let updateAtom = newAtom;
+    let insertOffset = 0;
+    let deleteOffset = 0;
     while (oldAtom) {
-        const diffIndex = oldAtom.index;
-        if (type === oldAtom.type) {
-            let commit;
-            if (type === 'text') {
-                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
-            }
-            else {
-                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
-                if (diffKey !== key || newJsxNode.type !== diffType) {
-                    prev = oldAtom;
-                    oldAtom = oldAtom.sibling;
-                    continue;
-                }
-                if (type === 'component') {
-                    commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
+        const startDiffAtom = newAtom;
+        let prev = null;
+        let isUsed = false;
+        while (newAtom) {
+            const newAtomType = newAtom.type;
+            if (oldAtom.type === newAtomType) {
+                if (newAtomType === TextAtomType) {
+                    newAtom.update = updateText(newAtom, oldAtom, nativeRenderer, context);
+                    isUsed = true;
                 }
                 else {
-                    commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
+                    const { key: newKey, type: newType } = newAtom.jsxNode;
+                    const { key: oldKey, type: oldType } = oldAtom.jsxNode;
+                    if (newType === oldType && newKey === oldKey) {
+                        if (newAtomType === ComponentAtomType) {
+                            newAtom.update = updateComponent(newAtom, oldAtom, deleteOffset, nativeRenderer, context);
+                        }
+                        else {
+                            newAtom.update = updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent);
+                        }
+                        isUsed = true;
+                    }
                 }
             }
-            commits.push(commit);
-            const next = oldAtom.sibling;
-            if (!prev) {
-                return next;
+            if (isUsed) {
+                const sibling = newAtom.next || newAtom.sibling;
+                if (prev) {
+                    prev.next = sibling;
+                }
+                newAtom = newAtom === startDiffAtom ? sibling : startDiffAtom;
+                break;
             }
-            prev.sibling = next;
-            return startDiffAtom;
+            prev = newAtom;
+            newAtom = newAtom.next || newAtom.sibling;
+        }
+        if (!isUsed) {
+            newAtom = startDiffAtom;
+            deleteOffset++;
+            cleanView(nativeRenderer, oldAtom, true);
         }
-        prev = oldAtom;
         oldAtom = oldAtom.sibling;
     }
-    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
-    return startDiffAtom;
+    function changeOffset() {
+        insertOffset++;
+    }
+    while (updateAtom) {
+        const update = updateAtom.update || createNewView(updateAtom, nativeRenderer, context, parentComponent, changeOffset);
+        update(insertOffset);
+        updateAtom.next = updateAtom.update = null;
+        updateAtom = updateAtom.sibling;
+    }
 }
 function createNewView(start, nativeRenderer, context, parentComponent, effect) {
     return function () {
@@ -1453,10 +1445,10 @@ function updateText(newAtom, oldAtom, nativeRenderer, context) {
         context.isParent = false;
     };
 }
-function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer, context, parentComponent) {
-    return function (offset) {
+function updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent) {
+    return function (insertOffset) {
         newAtom.nativeNode = oldAtom.nativeNode;
-        if (expectIndex - offset !== oldIndex) {
+        if (newAtom.index - insertOffset !== oldAtom.index - deleteOffset) {
             insertNode(nativeRenderer, newAtom, context);
         }
         context.host = newAtom.nativeNode;
@@ -1464,8 +1456,8 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
     };
 }
-function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
-    return function (offset) {
+function updateComponent(newAtom, reusedAtom, deleteOffset, nativeRenderer, context) {
+    return function (insertOffset) {
         const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
         const oldTemplate = component.template;
@@ -1475,7 +1467,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
-            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
+            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, newAtom.index - insertOffset !== reusedAtom.index - deleteOffset);
             updateView(nativeRenderer, component);
             return;
         }
@@ -1533,7 +1525,7 @@ function cleanView(nativeRenderer, atom, needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
             needClean = false;
         }
-        if (atom.type === 'element') {
+        if (atom.type === ElementAtomType) {
             const ref = atom.jsxNode.props[refKey];
             applyRefs(ref, atom.nativeNode, false);
         }
@@ -1562,42 +1554,17 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
-    const atom = {
-        type: 'component',
-        index: prevAtom.index + 1,
-        jsxNode,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
-    };
-    prevAtom.sibling = atom;
-    return atom;
-}
-function createChainByJSXText(jsxNode, prevAtom, isSvg) {
+function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
     const atom = {
-        type: 'text',
+        type,
         index: prevAtom.index + 1,
         jsxNode,
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg
-    };
-    prevAtom.sibling = atom;
-    return atom;
-}
-function createChainByJSXElement(element, prevAtom, isSvg) {
-    isSvg = isSvg || element.type === 'svg';
-    const atom = {
-        type: 'element',
-        index: prevAtom.index + 1,
-        jsxNode: element,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
+        isSvg,
+        update: null,
+        next: null
     };
     prevAtom.sibling = atom;
     return atom;
@@ -1606,7 +1573,7 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXText(jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, prevAtom, isSvg);
         }
         if (Array.isArray(jsxNode)) {
             return createChainByChildren(jsxNode, prevAtom, isSvg);
@@ -1614,13 +1581,13 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXElement(jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ElementAtomType, jsxNode, prevAtom, isSvg || jsxNode.type === 'svg');
             }
             else if (nodeType === 'function') {
-                return createChainByJSXComponent(jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, prevAtom, isSvg);
             }
         }
-        return createChainByJSXText(String(jsxNode), prevAtom, isSvg);
+        return createChainByJSXNode(TextAtomType, String(jsxNode), prevAtom, isSvg);
     }
     return prevAtom;
 }
@@ -1675,7 +1642,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                bindEvent(nativeRenderer, jsxNode, key, nativeNode, listener, isSvg);
+                nativeRenderer.listen(nativeNode, key, listener, isSvg);
             }
             continue;
         }
@@ -1713,7 +1680,6 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
-    newVNode.on = oldVNode.on;
     newAtom.child = oldAtom.child;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
@@ -1733,9 +1699,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                const oldOn = oldVNode.on;
-                nativeRenderer.unListen(nativeNode, key, oldOn[key].delegate, isSvg);
-                Reflect.deleteProperty(oldOn, key);
+                nativeRenderer.unListen(nativeNode, key, value, isSvg);
             }
             continue;
         }
@@ -1779,7 +1743,8 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             continue;
         }
         if (listenerReg.test(key)) {
-            newVNode.on[key].listenFn = newValue;
+            nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
+            nativeRenderer.listen(nativeNode, key, newValue, isSvg);
             continue;
         }
         if (key === refKey) {
@@ -1808,7 +1773,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                bindEvent(nativeRenderer, newVNode, key, nativeNode, value, isSvg);
+                nativeRenderer.listen(nativeNode, key, value, isSvg);
             }
             continue;
         }
@@ -1831,20 +1796,6 @@ function applyRefs(refs, nativeNode, binding) {
         }
     }
 }
-function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
-    let on = vNode.on;
-    if (!on) {
-        vNode.on = on = {};
-    }
-    const delegateObj = {
-        delegate(...args) {
-            return delegateObj.listenFn.apply(this, args);
-        },
-        listenFn
-    };
-    on[key] = delegateObj;
-    nativeRenderer.listen(nativeNode, key, delegateObj.delegate, isSvg);
-}
 
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.14",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -50,7 +50,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "9e55375068bc3657f348f4b0be498111b61eee3c",
+  "gitHead": "48779d88f1390751bbd06e4c4581bf3dbe613a26",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }