@viewfly/core 1.0.0-alpha.2 → 1.0.0-alpha.21

package/bundles/index.esm.js

@@ -161,6 +161,40 @@ var InjectFlags;
 class Injector {
 }
 
+/**
+ * 构造函数参数装饰器，用于改变注入 token
+ */
+const Inject = function InjectDecorator(token) {
+    if (this instanceof Inject) {
+        this.token = token;
+    }
+    else {
+        return makeParamDecorator(Inject, new Inject(token));
+    }
+};
+const Self = function SelfDecorator() {
+    if (!(this instanceof Self)) {
+        return makeParamDecorator(Self, new Self());
+    }
+};
+const SkipSelf = function SkipSelfDecorator() {
+    if (!(this instanceof SkipSelf)) {
+        return makeParamDecorator(SkipSelf, new SkipSelf());
+    }
+};
+const Optional = function OptionalDecorator() {
+    if (!(this instanceof Optional)) {
+        return makeParamDecorator(Optional, new Optional());
+    }
+};
+const Prop = function PropDecorator(token, notFoundValue, flags) {
+    if (!(this instanceof Prop)) {
+        return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
+            instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, notFoundValue, flags);
+        });
+    }
+};
+
 function stringify(token) {
     if (typeof token === 'string') {
         return token;
@@ -200,12 +234,12 @@ 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;
     }
-    get(token, flag, notFoundValue = THROW_IF_NOT_FOUND) {
+    /* eslint-disable-next-line */
+    get(token, notFoundValue = THROW_IF_NOT_FOUND, _) {
         if (notFoundValue === THROW_IF_NOT_FOUND) {
             throw nullInjectorErrorFn(token);
         }
@@ -213,40 +247,6 @@ class NullInjector extends Injector {
     }
 }
 
-/**
- * 构造函数参数装饰器，用于改变注入 token
- */
-const Inject = function InjectDecorator(token) {
-    if (this instanceof Inject) {
-        this.token = token;
-    }
-    else {
-        return makeParamDecorator(Inject, new Inject(token));
-    }
-};
-const Self = function SelfDecorator() {
-    if (!(this instanceof Self)) {
-        return makeParamDecorator(Self, new Self());
-    }
-};
-const SkipSelf = function SkipSelfDecorator() {
-    if (!(this instanceof SkipSelf)) {
-        return makeParamDecorator(SkipSelf, new SkipSelf());
-    }
-};
-const Optional = function OptionalDecorator() {
-    if (!(this instanceof Optional)) {
-        return makeParamDecorator(Optional, new Optional());
-    }
-};
-const Prop = function PropDecorator(token, flags, notFoundValue = THROW_IF_NOT_FOUND) {
-    if (!(this instanceof Prop)) {
-        return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
-            instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, flags, notFoundValue);
-        });
-    }
-};
-
 /**
  * 标准化 provide，并返回统一数据结构
  * @param provider
@@ -410,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 => {
@@ -424,15 +422,15 @@ class ReflectiveInjector extends Injector {
     /**
      * 用于获取当前注入器上下文内的实例、对象或数据
      * @param token 访问 token
-     * @param flags 查询规则
      * @param notFoundValue 如未查找到的返回值
+     * @param flags 查询规则
      */
-    get(token, flags = InjectFlags.Default, notFoundValue = THROW_IF_NOT_FOUND) {
+    get(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
         var _a;
         flags = flags || InjectFlags.Default;
         if (flags === InjectFlags.SkipSelf) {
             if (this.parentInjector) {
-                return this.parentInjector.get(token, InjectFlags.Default, notFoundValue);
+                return this.parentInjector.get(token, notFoundValue);
             }
             if (notFoundValue !== THROW_IF_NOT_FOUND) {
                 return notFoundValue;
@@ -476,9 +474,12 @@ class ReflectiveInjector extends Injector {
             return notFoundValue;
         }
         if (this.parentInjector) {
-            return this.parentInjector.get(token, flags === InjectFlags.Optional ? InjectFlags.Optional : InjectFlags.Default, notFoundValue);
+            return this.parentInjector.get(token, notFoundValue, flags === InjectFlags.Optional ? InjectFlags.Optional : InjectFlags.Default);
         }
         if (notFoundValue === THROW_IF_NOT_FOUND) {
+            // if (flags === InjectFlags.Optional) {
+            //   return null as U
+            // }
             throw reflectiveInjectorErrorFn(token);
         }
         return notFoundValue;
@@ -508,11 +509,11 @@ class ReflectiveInjector extends Injector {
             const tryValue = {};
             const injectToken = dep.injectKey instanceof ForwardRef ? dep.injectKey.getRef() : dep.injectKey;
             if (dep.visibility instanceof Self) {
-                reflectiveValue = this.get(injectToken, InjectFlags.Self, tryValue);
+                reflectiveValue = this.get(injectToken, tryValue, InjectFlags.Self);
             }
             else if (dep.visibility instanceof SkipSelf) {
                 if (this.parentInjector) {
-                    reflectiveValue = this.parentInjector.get(injectToken, InjectFlags.Default, tryValue);
+                    reflectiveValue = this.parentInjector.get(injectToken, tryValue);
                 }
                 else {
                     if (dep.optional) {
@@ -525,7 +526,7 @@ class ReflectiveInjector extends Injector {
                 }
             }
             else {
-                reflectiveValue = this.get(injectToken, InjectFlags.Default, tryValue);
+                reflectiveValue = this.get(injectToken, tryValue);
             }
             if (reflectiveValue === tryValue) {
                 if (dep.optional) {
@@ -587,13 +588,13 @@ function getArrayChanges(left, right) {
     return changes;
 }
 function classToString(config) {
-    if (!config) {
-        return '';
-    }
     if (typeof config === 'string') {
         return config;
     }
-    else if (Array.isArray(config)) {
+    if (!config) {
+        return '';
+    }
+    if (Array.isArray(config)) {
         const classes = [];
         for (const i of config) {
             const v = classToString(i);
@@ -603,7 +604,7 @@ function classToString(config) {
         }
         return classes.join(' ');
     }
-    else if (typeof config === 'object') {
+    if (typeof config === 'object') {
         if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
             return config.toString();
         }
@@ -630,6 +631,9 @@ function styleToObject(style) {
     });
     return obj;
 }
+const TextAtomType = Symbol('Text');
+const ElementAtomType = Symbol('Element');
+const ComponentAtomType = Symbol('Component');
 
 const componentSetupStack = [];
 const signalDepsStack = [];
@@ -736,30 +740,29 @@ class Component extends ReflectiveInjector {
             portalHost: this.instance.$portalHost
         };
     }
-    update(newProps, forceUpdate = false) {
+    update(newProps) {
         const oldProps = this.props;
-        const { add, remove, replace } = getObjectChanges(newProps, this.props);
-        if (add.length || remove.length || replace.length) {
-            this.invokePropsChangedHooks(newProps);
-        }
-        else if (!this.dirty) {
-            return this.template;
-        }
-        const newRefs = toRefs(newProps.ref);
-        if (this.refs) {
-            for (const oldRef of this.refs) {
-                if (!newRefs.includes(oldRef)) {
-                    oldRef.unBind(this.instance);
+        if (newProps !== oldProps) {
+            const { add, remove, replace } = getObjectChanges(newProps, oldProps);
+            if (add.length || remove.length || replace.length) {
+                this.invokePropsChangedHooks(newProps);
+            }
+            const newRefs = toRefs(newProps.ref);
+            if (this.refs) {
+                for (const oldRef of this.refs) {
+                    if (!newRefs.includes(oldRef)) {
+                        oldRef.unBind(this.instance);
+                    }
                 }
             }
+            for (const newRef of newRefs) {
+                newRef.bind(this.instance);
+            }
+            if (newRefs.length) {
+                this.refs = newRefs;
+            }
         }
-        for (const newRef of newRefs) {
-            newRef.bind(this.instance);
-        }
-        if (newRefs.length) {
-            this.refs = newRefs;
-        }
-        if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
+        if (typeof this.instance.$useMemo === 'function') {
             if (this.instance.$useMemo(newProps, oldProps)) {
                 return this.template;
             }
@@ -843,7 +846,12 @@ class Component extends ReflectiveInjector {
             }
         }
         if (unmountedCallbacks.length) {
-            this.unmountedCallbacks = unmountedCallbacks;
+            if (this.unmountedCallbacks) {
+                this.unmountedCallbacks.push(...unmountedCallbacks);
+            }
+            else {
+                this.unmountedCallbacks = unmountedCallbacks;
+            }
         }
         this.mountCallbacks = null;
     }
@@ -1232,9 +1240,9 @@ function withAnnotation(annotation, componentSetup) {
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
-function inject(token, flags = InjectFlags.Default, notFoundValue = THROW_IF_NOT_FOUND) {
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
     const component = getSetupContext();
-    return component.get(token, flags, notFoundValue);
+    return component.get(token, notFoundValue, flags);
 }
 /**
  * 获取当前组件实例
@@ -1272,14 +1280,17 @@ function withMemo(canUseMemo, render) {
     };
 }
 
-const listenerReg = /^on(?=[A-Z])/;
+const componentViewCache = new WeakMap();
+const listenerReg = /^on[A-Z]/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
             isInit = false;
             const atom = {
-                type: 'component',
+                type: ComponentAtomType,
+                index: 0,
+                nodeType: component.type,
                 jsxNode: component,
                 sibling: null,
                 child: null,
@@ -1299,41 +1310,28 @@ 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 === ElementAtomType) {
+        createElement(nativeRenderer, atom, parentComponent, context);
+    }
     else {
-        let nativeNode;
-        let applyRefs = null;
-        if (type === 'element') {
-            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, jsxNode, atom.isSvg);
-            nativeNode = n;
-            applyRefs = a;
-        }
-        else {
-            nativeNode = createTextNode(nativeRenderer, jsxNode, atom.isSvg);
-        }
-        atom.nativeNode = nativeNode;
-        insertNode(nativeRenderer, atom, context);
-        if (type === 'element') {
-            const childContext = {
-                isParent: true,
-                host: nativeNode,
-                rootHost: context.rootHost
-            };
-            let child = atom.child;
-            while (child) {
-                buildView(nativeRenderer, parentComponent, child, childContext);
-                child = child.sibling;
-            }
-        }
-        context.host = nativeNode;
-        context.isParent = false;
-        if (applyRefs) {
-            applyRefs();
-        }
+        createTextNode(nativeRenderer, atom, context);
+    }
+}
+function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
+    const childContext = {
+        isParent: true,
+        host: atom.nativeNode,
+        rootHost: context.rootHost
+    };
+    let child = atom.child;
+    while (child) {
+        buildView(nativeRenderer, parentComponent, child, childContext);
+        child = child.sibling;
     }
 }
 function updateView(nativeRenderer, component) {
@@ -1349,115 +1347,77 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent, rootHost } = component.$$view;
+    const { atom, host, isParent, rootHost } = componentViewCache.get(component);
     const diffAtom = atom.child;
-    const template = component.update(component.props, true);
+    const template = component.update(component.props);
     atom.child = createChildChain(template, atom.isSvg);
     const context = {
         host,
         isParent,
         rootHost
     };
-    diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
+    diff(nativeRenderer, component, atom.child, diffAtom, context, false);
     const next = atom.sibling;
     if (next && next.jsxNode instanceof Component) {
-        next.jsxNode.$$view.host = context.host;
-        next.jsxNode.$$view.isParent = context.isParent;
-    }
-}
-function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
-    let prevDiffAtom = null;
-    let firstDiffAtomIndexed = null;
-    if (oldAtom) {
-        prevDiffAtom = {
-            index,
-            atom: oldAtom,
-            prev: null
-        };
-        index++;
-        firstDiffAtomIndexed = prevDiffAtom;
-        oldAtom = oldAtom.sibling;
-        while (oldAtom) {
-            const diffAtom = {
-                index,
-                atom: oldAtom,
-                prev: prevDiffAtom
-            };
-            prevDiffAtom.next = diffAtom;
-            prevDiffAtom = diffAtom;
-            oldAtom = oldAtom.sibling;
-            index++;
-        }
+        const view = componentViewCache.get(next.jsxNode);
+        view.host = context.host;
+        view.isParent = context.isParent;
     }
+}
+function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
     const commits = [];
     function changeOffset() {
         offset++;
     }
     while (newAtom) {
-        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, nativeRenderer, commits, context, parentComponent, changeOffset);
+        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
         newAtom = newAtom.sibling;
-        expectIndex++;
     }
-    let dirtyDiffAtom = firstDiffAtomIndexed;
+    let dirtyDiffAtom = oldAtom;
     while (dirtyDiffAtom) {
-        cleanView(nativeRenderer, dirtyDiffAtom.atom, false);
-        dirtyDiffAtom = dirtyDiffAtom.next;
+        cleanView(nativeRenderer, dirtyDiffAtom, true);
+        dirtyDiffAtom = dirtyDiffAtom.sibling;
     }
     let offset = 0;
     for (let i = 0; i < commits.length; i++) {
         const commit = commits[i];
-        while (firstDiffAtomIndexed) {
-            if (firstDiffAtomIndexed.index <= i) {
+        while (oldAtom) {
+            if (oldAtom.index <= i) {
                 offset--;
-                firstDiffAtomIndexed = firstDiffAtomIndexed.next;
+                oldAtom = oldAtom.sibling;
                 continue;
             }
             break;
         }
-        commit(offset);
+        commit(offset, needMove);
     }
 }
-function createChanges(newAtom, expectIndex, diffAtomIndexed, nativeRenderer, commits, context, parentComponent, effect) {
-    const startDiffAtom = diffAtomIndexed;
-    const { jsxNode: newJsxNode, type } = newAtom;
-    const key = newJsxNode.key;
-    while (diffAtomIndexed) {
-        const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
-        if (type === diffAtom.type) {
+function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
+    const startDiffAtom = oldAtom;
+    let prev = null;
+    while (oldAtom) {
+        const newAtomType = newAtom.type;
+        if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
             let commit;
-            if (type === 'text') {
-                commit = updateText(newAtom, diffAtom, nativeRenderer, context);
+            if (newAtomType === TextAtomType) {
+                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
+            }
+            else if (newAtomType === ComponentAtomType) {
+                commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
             }
             else {
-                const { key: diffKey, type: diffType } = diffAtom.jsxNode;
-                if (diffKey !== key || newJsxNode.type !== diffType) {
-                    diffAtomIndexed = diffAtomIndexed.next;
-                    continue;
-                }
-                if (type === 'component') {
-                    commit = updateComponent(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context);
-                }
-                else {
-                    commit = updateElement(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context, parentComponent);
-                }
+                commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
             }
             commits.push(commit);
-            const next = diffAtomIndexed.next;
-            const prev = diffAtomIndexed.prev;
+            const next = oldAtom.sibling;
             if (!prev) {
-                diffAtomIndexed = next;
-                if (diffAtomIndexed) {
-                    diffAtomIndexed.prev = null;
-                }
-                return diffAtomIndexed;
-            }
-            prev.next = next;
-            if (next) {
-                next.prev = prev;
+                return next;
             }
+            prev.sibling = next;
             return startDiffAtom;
         }
-        diffAtomIndexed = diffAtomIndexed.next;
+        prev = oldAtom;
+        oldAtom = oldAtom.sibling;
     }
     commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
     return startDiffAtom;
@@ -1469,77 +1429,60 @@ function createNewView(start, nativeRenderer, context, parentComponent, effect)
     };
 }
 function updateText(newAtom, oldAtom, nativeRenderer, context) {
-    return function () {
+    return function (offset, needMove) {
         const nativeNode = oldAtom.nativeNode;
-        if (newAtom.jsxNode !== oldAtom.jsxNode) {
-            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode, newAtom.isSvg);
-        }
         newAtom.nativeNode = nativeNode;
+        if (needMove || newAtom.index - offset !== oldAtom.index) {
+            insertNode(nativeRenderer, newAtom, context);
+        }
         context.host = nativeNode;
         context.isParent = false;
     };
 }
-function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer, context, parentComponent) {
-    return function (offset) {
+function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent) {
+    return function (offset, needMove) {
         newAtom.nativeNode = oldAtom.nativeNode;
-        if (expectIndex - offset !== oldIndex) {
+        if (needMove || newAtom.index - offset !== oldAtom.index) {
             insertNode(nativeRenderer, newAtom, context);
         }
         context.host = newAtom.nativeNode;
         context.isParent = false;
-        const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
-        if (newAtom.child) {
-            diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
-                host: newAtom.nativeNode,
-                isParent: true,
-                rootHost: context.rootHost
-            }, 0, 0);
-        }
-        else if (oldAtom.child) {
-            let atom = oldAtom.child;
-            nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
-            while (atom) {
-                cleanView(nativeRenderer, atom, true);
-                atom = atom.sibling;
-            }
-        }
-        applyRefs();
+        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
     };
 }
-function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
-    return function (offset) {
+function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
+    return function (offset, needMove) {
         const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
         const oldTemplate = component.template;
         const newTemplate = component.update(newProps);
         const portalHost = component.instance.$portalHost;
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        component.$$view = Object.assign({ atom: newAtom }, context);
+        componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
-            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
-            updateView(nativeRenderer, component);
+            newAtom.child = reusedAtom.child;
+            reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
+            component.rendered();
             return;
         }
         if (newTemplate) {
             newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
         }
         if (newAtom.child) {
-            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex + offset);
+            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
         }
         else if (reusedAtom.child) {
             let atom = reusedAtom.child;
             while (atom) {
-                cleanView(nativeRenderer, atom, false);
+                cleanView(nativeRenderer, atom, true);
                 atom = atom.sibling;
             }
         }
         component.rendered();
     };
 }
-function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
-    let child = reusedAtom.child;
-    newAtom.child = child;
+function reuseComponentView(nativeRenderer, child, context, moveView) {
     const updateContext = (atom) => {
         if (atom.jsxNode instanceof Component) {
             let child = atom.child;
@@ -1561,13 +1504,21 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         child = child.sibling;
     }
 }
+function cleanElementChildren(atom, nativeRenderer) {
+    let child = atom.child;
+    nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
+    while (child) {
+        cleanView(nativeRenderer, child, false);
+        child = child.sibling;
+    }
+}
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
-        if (!needClean) {
+        if (needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
-            needClean = true;
+            needClean = false;
         }
-        if (atom.type === 'element') {
+        if (atom.type === ElementAtomType) {
             const ref = atom.jsxNode.props[refKey];
             applyRefs(ref, atom.nativeNode, false);
         }
@@ -1575,7 +1526,7 @@ function cleanView(nativeRenderer, atom, needClean) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            needClean = false;
+            needClean = true;
         }
         cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
@@ -1588,7 +1539,7 @@ function componentRender(nativeRenderer, component, from, context) {
     const { template, portalHost } = component.render();
     from.child = createChildChain(template, from.isSvg);
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-    component.$$view = Object.assign({ atom: from }, context);
+    componentViewCache.set(component, Object.assign({ atom: from }, context));
     let child = from.child;
     while (child) {
         buildView(nativeRenderer, component, child, context);
@@ -1596,49 +1547,26 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
-    const atom = {
-        type: 'component',
-        jsxNode,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
-    };
-    prevAtom.sibling = atom;
-    return atom;
-}
-function createChainByJSXText(jsxNode, prevAtom, isSvg) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
     const atom = {
-        type: 'text',
+        type,
+        index: prevAtom.index + 1,
         jsxNode,
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg
+        isSvg,
+        nodeType,
+        key
     };
     prevAtom.sibling = atom;
     return atom;
 }
-function createChainByJSXElement(element, prevAtom, isSvg) {
-    isSvg = isSvg || element.type === 'svg';
-    const atom = {
-        type: 'element',
-        jsxNode: element,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
-    };
-    prevAtom.sibling = atom;
-    atom.child = createChildChain(element.props.children, isSvg);
-    return atom;
-}
 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, jsxNode, prevAtom, isSvg);
         }
         if (Array.isArray(jsxNode)) {
             return createChainByChildren(jsxNode, prevAtom, isSvg);
@@ -1646,13 +1574,14 @@ 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, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXComponent(jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
             }
         }
-        return createChainByJSXText(String(jsxNode), prevAtom, isSvg);
+        const text = String(jsxNode);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
     }
     return prevAtom;
 }
@@ -1663,7 +1592,7 @@ function createChainByChildren(children, prevAtom, isSvg) {
     return prevAtom;
 }
 function createChildChain(template, isSvg) {
-    const beforeAtom = { sibling: null };
+    const beforeAtom = { sibling: null, index: -1 };
     createChainByNode(template, beforeAtom, isSvg);
     return beforeAtom.sibling;
 }
@@ -1680,12 +1609,14 @@ function insertNode(nativeRenderer, atom, context) {
         nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
     }
 }
-function createElement(nativeRenderer, vNode, isSvg) {
-    const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
-    const props = vNode.props;
+function createElement(nativeRenderer, atom, parentComponent, context) {
+    const { isSvg, jsxNode } = atom;
+    const nativeNode = nativeRenderer.createElement(jsxNode.type, isSvg);
+    const props = jsxNode.props;
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
+            atom.child = createChildChain(jsxNode.props.children, isSvg);
             continue;
         }
         if (key === 'class') {
@@ -1705,7 +1636,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                bindEvent(nativeRenderer, vNode, key, nativeNode, listener, isSvg);
+                nativeRenderer.listen(nativeNode, key, listener, isSvg);
             }
             continue;
         }
@@ -1715,21 +1646,32 @@ function createElement(nativeRenderer, vNode, isSvg) {
         }
         nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
     }
-    return {
-        nativeNode,
-        applyRefs: () => {
-            applyRefs(bindingRefs, nativeNode, true);
-        }
-    };
-}
-function createTextNode(nativeRenderer, text, isSvg) {
-    return nativeRenderer.createTextNode(text, isSvg);
-}
-function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
+    atom.nativeNode = nativeNode;
+    insertNode(nativeRenderer, atom, context);
+    buildElementChildren(atom, nativeRenderer, parentComponent, context);
+    context.host = nativeNode;
+    context.isParent = false;
+    applyRefs(bindingRefs, nativeNode, true);
+}
+function createTextNode(nativeRenderer, atom, context) {
+    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.isSvg);
+    atom.nativeNode = nativeNode;
+    insertNode(nativeRenderer, atom, context);
+    context.host = nativeNode;
+    context.isParent = false;
+}
+function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
+    const newVNode = newAtom.jsxNode;
+    const isSvg = newAtom.isSvg;
+    const nativeNode = newAtom.nativeNode;
+    const oldVNode = oldAtom.jsxNode;
+    if (newVNode === oldVNode) {
+        updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
+        return;
+    }
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
-    newVNode.on = oldVNode.on;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
             continue;
@@ -1746,10 +1688,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                const type = key.replace(listenerReg, '').toLowerCase();
-                const oldOn = oldVNode.on;
-                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
-                Reflect.deleteProperty(oldOn, type);
+                nativeRenderer.unListen(nativeNode, key, value, isSvg);
             }
             continue;
         }
@@ -1782,8 +1721,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             continue;
         }
         if (listenerReg.test(key)) {
-            const listenType = key.replace(listenerReg, '').toLowerCase();
-            newVNode.on[listenType].listenFn = newValue;
+            nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
+            nativeRenderer.listen(nativeNode, key, newValue, isSvg);
             continue;
         }
         if (key === refKey) {
@@ -1810,7 +1749,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                bindEvent(nativeRenderer, newVNode, key, nativeNode, value, isSvg);
+                nativeRenderer.listen(nativeNode, key, value, isSvg);
             }
             continue;
         }
@@ -1820,10 +1759,36 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
-    return () => {
-        applyRefs(unBindRefs, nativeNode, false);
-        applyRefs(bindRefs, nativeNode, true);
-    };
+    updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
+    applyRefs(unBindRefs, nativeNode, false);
+    applyRefs(bindRefs, nativeNode, true);
+}
+function updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg) {
+    /**
+     * 不能仅依赖 children 是否相等的判断来确定是否要继续向下 diff
+     * 如：
+     * ```tsx
+     * <Comp>
+     *   <div>
+     *     {props.children}
+     *   </div>
+     * </Comp>
+     * ```
+     * 其中当 Comp 产生变化时，children 来自父组件，这时 children 是相等的，
+     * 但，children 内可能有子组件也发生了变化，如果不继续 diff，那么，子组件
+     * 的视图更新将不会发生
+     */
+    newAtom.child = createChildChain(newAtom.jsxNode.props.children, isSvg);
+    if (!newAtom.child) {
+        cleanElementChildren(oldAtom, nativeRenderer);
+    }
+    else {
+        diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
+            host: newAtom.nativeNode,
+            isParent: true,
+            rootHost: context.rootHost
+        }, false);
+    }
 }
 function applyRefs(refs, nativeNode, binding) {
     if (refs) {
@@ -1835,21 +1800,6 @@ function applyRefs(refs, nativeNode, binding) {
         }
     }
 }
-function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
-    let on = vNode.on;
-    if (!on) {
-        vNode.on = on = {};
-    }
-    const type = key.replace(listenerReg, '').toLowerCase();
-    const delegateObj = {
-        delegate(...args) {
-            return delegateObj.listenFn.apply(this, args);
-        },
-        listenFn
-    };
-    on[type] = delegateObj;
-    nativeRenderer.listen(nativeNode, type, delegateObj.delegate, isSvg);
-}
 
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知