@viewfly/core 1.2.2 → 1.2.5

package/bundles/index.js

@@ -603,79 +603,6 @@ class ReflectiveInjector {
 
 const Type = Function;
 
-const refKey = 'ref';
-function getObjectChanges(newProps, oldProps) {
-    const changes = {
-        remove: [],
-        add: [],
-        replace: []
-    };
-    for (const key in newProps) {
-        const leftValue = newProps[key];
-        const rightValue = oldProps[key];
-        if (Reflect.has(oldProps, key)) {
-            if (leftValue !== rightValue) {
-                changes.replace.push([key, leftValue, rightValue]);
-            }
-            continue;
-        }
-        changes.add.push([key, leftValue]);
-    }
-    for (const key in oldProps) {
-        if (!Reflect.has(newProps, key)) {
-            changes.remove.push([key, oldProps[key]]);
-        }
-    }
-    return changes;
-}
-function classToString(config) {
-    if (typeof config === 'string') {
-        return config;
-    }
-    if (!config) {
-        return '';
-    }
-    if (Array.isArray(config)) {
-        const classes = [];
-        for (const i of config) {
-            const v = classToString(i);
-            if (v) {
-                classes.push(v);
-            }
-        }
-        return classes.join(' ');
-    }
-    if (typeof config === 'object') {
-        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
-            return config.toString();
-        }
-        const classes = [];
-        for (const key in config) {
-            if ({}.hasOwnProperty.call(config, key) && config[key]) {
-                classes.push(key);
-            }
-        }
-        return classes.join(' ');
-    }
-    return '';
-}
-function styleToObject(style) {
-    if (typeof style !== 'string') {
-        return style;
-    }
-    const obj = {};
-    style.split(';').map(s => s.split(':')).forEach(v => {
-        if (!v[0] || !v[1]) {
-            return;
-        }
-        obj[v[0].trim()] = v[1].trim();
-    });
-    return obj;
-}
-const TextAtomType = Symbol('Text');
-const ElementAtomType = Symbol('Element');
-const ComponentAtomType = Symbol('Component');
-
 class Listener {
     constructor(effect) {
         Object.defineProperty(this, "effect", {
@@ -922,109 +849,25 @@ class Component {
         return this._changed;
     }
     constructor(parentComponent, type, props, key) {
-        Object.defineProperty(this, "parentComponent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: parentComponent
-        });
-        Object.defineProperty(this, "type", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: type
-        });
-        Object.defineProperty(this, "props", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: props
-        });
-        Object.defineProperty(this, "key", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: key
-        });
-        Object.defineProperty(this, "instance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "changedSubComponents", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Set()
-        });
-        Object.defineProperty(this, "unmountedCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "mountCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "propsChangedCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "updatedCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "updatedDestroyCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "propsChangedDestroyCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_dirty", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        Object.defineProperty(this, "_changed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        Object.defineProperty(this, "isFirstRendering", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        Object.defineProperty(this, "refs", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "listener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Listener(() => {
-                this.markAsDirtied();
-            })
+        this.parentComponent = parentComponent;
+        this.type = type;
+        this.props = props;
+        this.key = key;
+        this.instance = null;
+        this.changedSubComponents = new Set();
+        this.viewMetadata = null;
+        this.unmountedCallbacks = null;
+        this.mountCallbacks = null;
+        this.propsChangedCallbacks = null;
+        this.updatedCallbacks = null;
+        this.updatedDestroyCallbacks = null;
+        this.propsChangedDestroyCallbacks = null;
+        this._dirty = true;
+        this._changed = false;
+        this.isFirstRendering = true;
+        this.refs = null;
+        this.listener = new Listener(() => {
+            this.markAsDirtied();
         });
     }
     markAsDirtied() {
@@ -1039,7 +882,7 @@ class Component {
             return;
         }
         this._changed = true;
-        if (this.parentComponent instanceof Component) {
+        if (this.parentComponent) {
             this.parentComponent.markAsChanged(this);
         }
     }
@@ -1085,62 +928,54 @@ class Component {
         update(template, this.instance.$portalHost);
         this.rendered();
     }
-    update(newProps, updateChildren, reuseChildren) {
-        const oldProps = this.props;
-        if (newProps !== oldProps) {
-            const { add, remove, replace } = getObjectChanges(newProps, oldProps);
-            if (add.length || remove.length || replace.length) {
-                this.invokePropsChangedHooks(newProps);
-            }
-            else if (!this.dirty) {
-                this.props = newProps;
-                reuseChildren(false);
-                this.rendered();
-                return;
-            }
-            const newRefs = toRefs(newProps.ref);
-            if (this.refs) {
-                for (const oldRef of this.refs) {
-                    if (!newRefs.includes(oldRef)) {
-                        oldRef.unBind(this.instance);
-                    }
+    updateProps(newProps) {
+        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;
+        }
+    }
+    canUpdate(oldProps, newProps) {
         if (typeof this.instance.$useMemo === 'function') {
             if (this.instance.$useMemo(newProps, oldProps)) {
-                reuseChildren(true);
-                this.rendered();
-                return;
+                return false;
             }
         }
+        return true;
+    }
+    rerender() {
         this.listener.destroy();
         pushListener(this.listener);
         const template = this.instance.$render();
         popListener();
-        updateChildren(template);
-        this.rendered();
+        return template;
     }
     destroy() {
-        var _a, _b, _c;
         this.listener.destroy();
-        (_a = this.updatedDestroyCallbacks) === null || _a === void 0 ? void 0 : _a.forEach(fn => {
-            fn();
-        });
-        (_b = this.propsChangedDestroyCallbacks) === null || _b === void 0 ? void 0 : _b.forEach(fn => {
-            fn();
-        });
-        (_c = this.unmountedCallbacks) === null || _c === void 0 ? void 0 : _c.forEach(fn => {
-            fn();
-        });
-        if (this.parentComponent instanceof Component) {
-            this.parentComponent.changedSubComponents.delete(this);
+        if (this.updatedDestroyCallbacks) {
+            this.updatedDestroyCallbacks.forEach(fn => {
+                fn();
+            });
+        }
+        if (this.propsChangedDestroyCallbacks) {
+            this.propsChangedDestroyCallbacks.forEach(fn => {
+                fn();
+            });
+        }
+        if (this.unmountedCallbacks) {
+            this.unmountedCallbacks.forEach(fn => {
+                fn();
+            });
         }
         this.parentComponent =
             this.propsChangedDestroyCallbacks =
@@ -1149,7 +984,6 @@ class Component {
                         this.updatedCallbacks =
                             this.propsChangedCallbacks =
                                 this.unmountedCallbacks = null;
-        this.changedSubComponents.clear();
     }
     rendered() {
         this.changedSubComponents.clear();
@@ -1162,7 +996,7 @@ class Component {
         }
         if (this.changed) {
             Promise.resolve().then(() => {
-                if (this.parentComponent instanceof Component) {
+                if (this.parentComponent) {
                     this.parentComponent.markAsChanged(this);
                 }
             });
@@ -1351,11 +1185,89 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+function hasChange(newProps, oldProps) {
+    const newKeys = Object.keys(oldProps);
+    const oldKeys = Object.keys(newProps);
+    if (oldKeys.length !== newKeys.length) {
+        return true;
+    }
+    const len = oldKeys.length;
+    for (let i = 0; i < len; i++) {
+        const key = newKeys[i];
+        if (newProps[key] !== oldProps[key]) {
+            return true;
+        }
+    }
+    return false;
+}
+const refKey = 'ref';
+function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
+    for (const key in oldProps) {
+        if (!(key in newProps)) {
+            onDeleted(key, oldProps[key]);
+        }
+    }
+    for (const key in newProps) {
+        if (!(key in oldProps)) {
+            onAdded(key, newProps[key]);
+        }
+        else if (oldProps[key] !== newProps[key]) {
+            onUpdated(key, newProps[key], oldProps[key]);
+        }
+    }
+}
+function classToString(config) {
+    if (typeof config === 'string') {
+        return config;
+    }
+    if (!config) {
+        return '';
+    }
+    if (Array.isArray(config)) {
+        const classes = [];
+        for (const i of config) {
+            const v = classToString(i);
+            if (v) {
+                classes.push(v);
+            }
+        }
+        return classes.join(' ');
+    }
+    if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            return config.toString();
+        }
+        const classes = [];
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
+            }
+        }
+        return classes.join(' ');
+    }
+    return '';
+}
+function styleToObject(style) {
+    if (typeof style !== 'string') {
+        return style || {};
+    }
+    const obj = {};
+    style.split(';').map(s => s.split(':')).forEach(v => {
+        if (!v[0] || !v[1]) {
+            return;
+        }
+        obj[v[0].trim()] = v[1].trim();
+    });
+    return obj;
+}
+const TextAtomType = Symbol('Text');
+const ElementAtomType = Symbol('Element');
+const ComponentAtomType = Symbol('Component');
+
 const ElementNamespaceMap = {
     svg: 'svg',
     math: 'mathml',
 };
-const componentViewCache = new WeakMap();
 const listenerReg = /^on[A-Z]/;
 function createRenderer(component, nativeRenderer, namespace) {
     let isInit = true;
@@ -1379,7 +1291,7 @@ function createRenderer(component, nativeRenderer, namespace) {
             });
         }
         else {
-            updateView(nativeRenderer, component, false);
+            deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
         }
     };
 }
@@ -1404,37 +1316,39 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
         child = child.sibling;
     }
 }
-function updateView(nativeRenderer, component, needMove) {
+function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
+    const newTemplate = component.rerender();
+    newAtom.child = createChildChain(newTemplate, newAtom.namespace);
+    diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
+}
+function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
     if (component.dirty) {
-        const { atom, host, isParent, rootHost } = componentViewCache.get(component);
-        applyChanges(nativeRenderer, component, atom, {
-            host,
-            isParent,
-            rootHost
-        }, needMove);
+        const canUpdate = component.canUpdate(component.props, component.props);
+        if (canUpdate) {
+            const { atom, host, isParent, rootHost } = component.viewMetadata;
+            const context = {
+                host,
+                isParent,
+                rootHost
+            };
+            const diffAtom = atom.child;
+            patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
+            const next = atom.sibling;
+            if (next && next.jsxNode instanceof Component) {
+                const view = next.jsxNode.viewMetadata;
+                view.host = context.host;
+                view.isParent = context.isParent;
+            }
+        }
+        component.rendered();
     }
     else if (component.changed) {
         component.changedSubComponents.forEach(child => {
-            updateView(nativeRenderer, child, needMove);
+            deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
         });
         component.rendered();
     }
 }
-function applyChanges(nativeRenderer, component, atom, context, needMove) {
-    const diffAtom = atom.child;
-    component.update(component.props, newTemplate => {
-        atom.child = createChildChain(newTemplate, atom.namespace);
-        diff(nativeRenderer, component, atom.child, diffAtom, context, needMove);
-        const next = atom.sibling;
-        if (next && next.jsxNode instanceof Component) {
-            const view = componentViewCache.get(next.jsxNode);
-            view.host = context.host;
-            view.isParent = context.isParent;
-        }
-    }, (skipSubComponentDiff) => {
-        reuseComponentView(nativeRenderer, atom, context, needMove, skipSubComponentDiff);
-    });
-}
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
     const commits = [];
     function changeOffset() {
@@ -1450,7 +1364,8 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
         dirtyDiffAtom = dirtyDiffAtom.sibling;
     }
     let offset = 0;
-    for (let i = 0; i < commits.length; i++) {
+    const len = commits.length;
+    for (let i = 0; i < len; i++) {
         const commit = commits[i];
         while (oldAtom) {
             if (oldAtom.index <= i) {
@@ -1460,7 +1375,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
             }
             break;
         }
-        commit(offset, needMove);
+        commit.callback(commit.params, offset, needMove);
     }
 }
 function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
@@ -1469,17 +1384,19 @@ function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, paren
     while (oldAtom) {
         const newAtomType = newAtom.type;
         if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
-            let commit;
-            if (newAtomType === TextAtomType) {
-                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
-            }
-            else if (newAtomType === ComponentAtomType) {
-                commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
-            }
-            else {
-                commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
-            }
-            commits.push(commit);
+            commits.push({
+                callback: newAtomType === TextAtomType ? updateText :
+                    newAtomType === ComponentAtomType ? updateComponent :
+                        updateElement,
+                params: {
+                    oldAtom,
+                    newAtom,
+                    nativeRenderer,
+                    context,
+                    effect,
+                    parentComponent
+                }
+            });
             const next = oldAtom.sibling;
             if (!prev) {
                 return next;
@@ -1490,81 +1407,85 @@ function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, paren
         prev = oldAtom;
         oldAtom = oldAtom.sibling;
     }
-    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
+    commits.push({
+        callback: patchUpdate,
+        params: {
+            oldAtom: oldAtom,
+            newAtom,
+            nativeRenderer,
+            context,
+            effect,
+            parentComponent
+        }
+    });
     return startDiffAtom;
 }
-function createNewView(start, nativeRenderer, context, parentComponent, effect) {
-    return function () {
-        buildView(nativeRenderer, parentComponent, start, context);
-        effect();
-    };
+function patchUpdate(params) {
+    const { nativeRenderer, parentComponent, newAtom, context, effect } = params;
+    buildView(nativeRenderer, parentComponent, newAtom, context);
+    effect();
 }
-function updateText(newAtom, oldAtom, nativeRenderer, context) {
-    return function (offset, needMove) {
-        const nativeNode = oldAtom.nativeNode;
-        newAtom.nativeNode = nativeNode;
-        if (needMove || newAtom.index - offset !== oldAtom.index) {
-            insertNode(nativeRenderer, newAtom, context);
-        }
-        context.host = nativeNode;
-        context.isParent = false;
-    };
+function updateText(params, offset, needMove) {
+    const { oldAtom, newAtom, nativeRenderer, context } = params;
+    const nativeNode = oldAtom.nativeNode;
+    newAtom.nativeNode = nativeNode;
+    if (needMove || newAtom.index - offset !== oldAtom.index) {
+        insertNode(nativeRenderer, newAtom, context);
+    }
+    context.host = nativeNode;
+    context.isParent = false;
 }
-function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent) {
-    return function (offset, needMove) {
-        newAtom.nativeNode = oldAtom.nativeNode;
-        if (needMove || newAtom.index - offset !== oldAtom.index) {
-            insertNode(nativeRenderer, newAtom, context);
-        }
-        context.host = newAtom.nativeNode;
-        context.isParent = false;
-        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-            host: newAtom.nativeNode,
-            isParent: true,
-            rootHost: context.rootHost
-        });
-    };
+function updateElement(params, offset, needMove) {
+    const { nativeRenderer, newAtom, oldAtom, context, parentComponent } = params;
+    newAtom.nativeNode = oldAtom.nativeNode;
+    if (needMove || newAtom.index - offset !== oldAtom.index) {
+        insertNode(nativeRenderer, newAtom, context);
+    }
+    context.host = newAtom.nativeNode;
+    context.isParent = false;
+    updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
+        host: newAtom.nativeNode,
+        isParent: true,
+        rootHost: context.rootHost
+    });
 }
-function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
-    return function (offset, needMove) {
-        const component = reusedAtom.jsxNode;
-        const newProps = newAtom.jsxNode.props;
-        const portalHost = component.instance.$portalHost;
-        context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
-        newAtom.jsxNode = component;
-        component.update(newProps, newTemplate => {
-            if (newTemplate) {
-                newAtom.child = createChildChain(newTemplate, newAtom.namespace);
-            }
-            if (newAtom.child) {
-                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, true);
-                    atom = atom.sibling;
-                }
-            }
-        }, (skipSubComponentDiff) => {
-            newAtom.child = reusedAtom.child;
-            reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index, skipSubComponentDiff);
-        });
-    };
+function updateComponent(params, offset, needMove) {
+    const { oldAtom, newAtom, nativeRenderer } = params;
+    let context = params.context;
+    const component = oldAtom.jsxNode;
+    const portalHost = component.instance.$portalHost;
+    context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
+    component.viewMetadata = Object.assign({ atom: newAtom }, context);
+    const newProps = newAtom.jsxNode.props;
+    newAtom.jsxNode = component;
+    needMove = needMove || newAtom.index - offset !== oldAtom.index;
+    const canUpdate = component.canUpdate(component.props, newProps);
+    const propsIsChanged = hasChange(newProps, component.props);
+    if (propsIsChanged) {
+        component.updateProps(newProps);
+    }
+    if (canUpdate && (propsIsChanged || component.dirty)) {
+        patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
+        const next = oldAtom.sibling;
+        if (next && next.jsxNode instanceof Component) {
+            const view = next.jsxNode.viewMetadata;
+            view.host = context.host;
+            view.isParent = context.isParent;
+        }
+    }
+    else {
+        newAtom.child = oldAtom.child;
+        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate);
+    }
+    component.rendered();
 }
 function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
     const updateContext = (atom) => {
-        if (atom.jsxNode instanceof Component) {
-            if (skipSubComponentDiff || !moveView) {
-                let child = atom.child;
-                while (child) {
-                    updateContext(child);
-                    child = child.sibling;
-                }
-            }
-            else {
-                applyChanges(nativeRenderer, atom.jsxNode, atom, context, true);
+        const jsxNode = atom.jsxNode;
+        if (jsxNode instanceof Component) {
+            reuseComponentView(nativeRenderer, atom.child, context, moveView, skipSubComponentDiff);
+            if (!skipSubComponentDiff) {
+                deepUpdateByComponentDirtyTree(nativeRenderer, jsxNode, moveView);
             }
         }
         else {
@@ -1585,7 +1506,7 @@ function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponen
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component) {
-            updateView(nativeRenderer, child.jsxNode, false);
+            deepUpdateByComponentDirtyTree(nativeRenderer, child.jsxNode, false);
         }
         else {
             reuseElementChildrenView(nativeRenderer, child);
@@ -1632,7 +1553,7 @@ function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
         from.child = createChildChain(template, from.namespace);
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        componentViewCache.set(component, Object.assign({ atom: from }, context));
+        component.viewMetadata = Object.assign({ atom: from }, context);
         let child = from.child;
         while (child) {
             buildView(nativeRenderer, component, child, context);
@@ -1657,14 +1578,14 @@ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key)
 }
 function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     const type = typeof jsxNode;
-    if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
-        if (typeof jsxNode === 'string') {
+    if (jsxNode != null && type !== 'boolean') {
+        if (type === 'string') {
             return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, elementNamespace);
         }
-        if (Array.isArray(jsxNode)) {
-            return createChainByChildren(jsxNode, prevAtom, elementNamespace);
-        }
         if (type === 'object') {
+            if (Array.isArray(jsxNode)) {
+                return createChainByChildren(jsxNode, prevAtom, elementNamespace);
+            }
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
                 return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace || ElementNamespaceMap[jsxNode.type], jsxNode.key);
@@ -1775,43 +1696,66 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         reuseElementChildrenView(nativeRenderer, newAtom);
         return;
     }
-    const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
     let updatedChildren = false;
-    let len = changes.remove.length;
-    for (let i = 0; i < len; i++) {
-        const [key, value] = changes.remove[i];
+    comparePropsWithCallbacks(oldVNode.props, newVNode.props, (key, oldValue) => {
         if (key === 'children') {
             updatedChildren = true;
             cleanElementChildren(oldAtom, nativeRenderer);
-            continue;
+            return;
         }
         if (key === 'class') {
             nativeRenderer.setClass(nativeNode, '', isSvg);
-            continue;
+            return;
         }
         if (key === 'style') {
-            for (const styleName in styleToObject(value)) {
+            for (const styleName in styleToObject(oldValue)) {
                 nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
             }
-            continue;
+            return;
         }
         if (listenerReg.test(key)) {
-            if (typeof value === 'function') {
-                nativeRenderer.unListen(nativeNode, key, value, isSvg);
+            if (typeof oldValue === 'function') {
+                nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
             }
-            continue;
+            return;
         }
         if (key === refKey) {
-            unBindRefs = value;
-            continue;
+            unBindRefs = oldValue;
+            return;
         }
         nativeRenderer.removeProperty(nativeNode, key, isSvg);
-    }
-    len = changes.replace.length;
-    for (let i = 0; i < len; i++) {
-        const [key, newValue, oldValue] = changes.replace[i];
+    }, (key, value) => {
+        if (key === 'children') {
+            updatedChildren = true;
+            newAtom.child = createElementChildren(newVNode.type, value, isSvg);
+            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
+            return;
+        }
+        if (key === 'class') {
+            nativeRenderer.setClass(nativeNode, classToString(value), isSvg);
+            return;
+        }
+        if (key === 'style') {
+            const styleObj = styleToObject(value);
+            for (const styleName in styleObj) {
+                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+            }
+            return;
+        }
+        if (listenerReg.test(key)) {
+            if (typeof value === 'function') {
+                nativeRenderer.listen(nativeNode, key, value, isSvg);
+            }
+            return;
+        }
+        if (key === refKey) {
+            bindRefs = value;
+            return;
+        }
+        nativeRenderer.setProperty(nativeNode, key, value, isSvg);
+    }, (key, newValue, oldValue) => {
         if (key === 'children') {
             updatedChildren = true;
             newAtom.child = createElementChildren(newVNode.type, newValue, isSvg);
@@ -1824,7 +1768,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             else {
                 diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
             }
-            continue;
+            return;
         }
         if (key === 'class') {
             const oldClassName = classToString(oldValue);
@@ -1832,62 +1776,30 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             if (oldClassName !== newClassName) {
                 nativeRenderer.setClass(nativeNode, newClassName, isSvg);
             }
-            continue;
+            return;
         }
         if (key === 'style') {
-            const styleChanges = getObjectChanges(styleToObject(newValue) || {}, styleToObject(oldValue) || {});
-            for (const [styleName] of styleChanges.remove) {
+            comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), styleName => {
                 nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
-            }
-            for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
+            }, (styleName, styleValue) => {
                 nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
-            }
-            continue;
+            }, (styleName, styleValue) => {
+                nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
+            });
+            return;
         }
         if (listenerReg.test(key)) {
             nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
             nativeRenderer.listen(nativeNode, key, newValue, isSvg);
-            continue;
+            return;
         }
         if (key === refKey) {
             unBindRefs = oldValue;
             bindRefs = newValue;
-            continue;
+            return;
         }
         nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
-    }
-    len = changes.add.length;
-    for (let i = 0; i < len; i++) {
-        const [key, value] = changes.add[i];
-        if (key === 'children') {
-            updatedChildren = true;
-            newAtom.child = createElementChildren(newVNode.type, value, isSvg);
-            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
-            continue;
-        }
-        if (key === 'class') {
-            nativeRenderer.setClass(nativeNode, classToString(value), isSvg);
-            continue;
-        }
-        if (key === 'style') {
-            const styleObj = styleToObject(value);
-            for (const styleName in styleObj) {
-                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
-            }
-            continue;
-        }
-        if (listenerReg.test(key)) {
-            if (typeof value === 'function') {
-                nativeRenderer.listen(nativeNode, key, value, isSvg);
-            }
-            continue;
-        }
-        if (key === refKey) {
-            bindRefs = value;
-            continue;
-        }
-        nativeRenderer.setProperty(nativeNode, key, value, isSvg);
-    }
+    });
     if (!updatedChildren) {
         newAtom.child = oldAtom.child;
         reuseElementChildrenView(nativeRenderer, newAtom);