@viewfly/core 0.0.3 → 0.0.5

package/bundles/foundation/renderer.d.ts

@@ -16,6 +16,7 @@ export declare class Renderer {
     private reconcileElement;
     private applyChanges;
     private diff;
+    private reuseComponentView;
     private createChanges;
     private cleanView;
     private buildView;
@@ -30,4 +31,5 @@ export declare class Renderer {
     private createTextNode;
     private updateNativeNodeProperties;
     private applyRefs;
+    private bindEvent;
 }

package/bundles/index.esm.js

@@ -43,6 +43,80 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
+const refKey = 'ref';
+function getObjectChanges(newProps, oldProps) {
+    const changes = {
+        remove: [],
+        add: [],
+        replace: []
+    };
+    Object.keys(newProps).forEach(key => {
+        const leftValue = newProps[key];
+        const rightValue = oldProps[key];
+        if (Reflect.has(oldProps, key)) {
+            if (leftValue !== rightValue) {
+                changes.replace.push([key, leftValue, rightValue]);
+            }
+            return;
+        }
+        changes.add.push([key, leftValue]);
+    });
+    Object.keys(oldProps).forEach(key => {
+        if (!Reflect.has(newProps, key)) {
+            changes.remove.push([key, oldProps[key]]);
+        }
+    });
+    return changes;
+}
+function classToString(config) {
+    if (!config) {
+        return '';
+    }
+    if (typeof config === 'string') {
+        return config;
+    }
+    else if (Array.isArray(config)) {
+        return config.map(i => {
+            return classToString(i);
+        }).join(' ');
+    }
+    else 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(' ');
+    }
+}
+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;
+}
+
+class Memo {
+    constructor(shouldUpdate, render) {
+        this.shouldUpdate = shouldUpdate;
+        this.render = render;
+    }
+}
+function withMemo(shouldUpdate, render) {
+    return new Memo(shouldUpdate, render);
+}
+
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -122,17 +196,29 @@ class Component extends ReflectiveInjector {
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const template = render();
+        const templateRender = render instanceof Memo ? render.render : render;
+        let template = templateRender();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
         });
         return {
             template,
-            render: () => {
+            render: (newProps, oldProps) => {
+                if (newProps !== oldProps) {
+                    const { add, remove, replace } = getObjectChanges(newProps, oldProps);
+                    if (add.length || remove.length || replace.length) {
+                        this.invokePropsChangedHooks(newProps);
+                    }
+                }
+                if (render instanceof Memo) {
+                    if (!render.shouldUpdate(newProps, oldProps)) {
+                        return template;
+                    }
+                }
                 this.unWatch();
                 signalDepsStack.push([]);
-                const template = render();
+                template = templateRender();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -164,20 +250,6 @@ class Component extends ReflectiveInjector {
             this.invokeUpdatedHooks();
         }
     }
-    invokePropsChangedHooks(newProps) {
-        const oldProps = this.props;
-        this.props = newProps;
-        this.propsChangedDestroyCallbacks.forEach(fn => {
-            fn();
-        });
-        this.propsChangedDestroyCallbacks = [];
-        for (const fn of this.propsChangedCallbacks) {
-            const destroyFn = fn(newProps, oldProps);
-            if (typeof destroyFn === 'function') {
-                this.propsChangedDestroyCallbacks.push(destroyFn);
-            }
-        }
-    }
     destroy() {
         this.unWatch();
         this.updatedDestroyCallbacks.forEach(fn => {
@@ -195,6 +267,20 @@ class Component extends ReflectiveInjector {
         this.mountCallbacks = [];
         this.updatedCallbacks = [];
     }
+    invokePropsChangedHooks(newProps) {
+        const oldProps = this.props;
+        this.props = newProps;
+        this.propsChangedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.propsChangedDestroyCallbacks = [];
+        for (const fn of this.propsChangedCallbacks) {
+            const destroyFn = fn(newProps, oldProps);
+            if (typeof destroyFn === 'function') {
+                this.propsChangedDestroyCallbacks.push(destroyFn);
+            }
+        }
+    }
     invokeMountHooks() {
         for (const fn of this.mountCallbacks) {
             const destroyFn = fn();
@@ -383,13 +469,25 @@ function useSignal(state) {
             return;
         }
         state = newState;
-        for (const fn of signal[depsKey]) {
+        const depCallbacks = Array.from(signal[depsKey]);
+        for (const fn of depCallbacks) {
+            // 回调中可能会对依赖做出修改，故需先缓存起来
             fn();
         }
     };
     signal[depsKey] = new Set();
     return signal;
 }
+function invokeDepFn(fn) {
+    const deps = [];
+    signalDepsStack.push(deps);
+    const data = fn();
+    signalDepsStack.pop();
+    return {
+        deps,
+        data
+    };
+}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -398,18 +496,32 @@ function useSignal(state) {
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
 function useDerived(callback, isContinue) {
-    const deps = [];
-    signalDepsStack.push(deps);
-    const data = callback();
-    signalDepsStack.pop();
+    let { data, deps } = invokeDepFn(callback);
     const signal = useSignal(data);
-    if (deps.length) {
-        const unListen = useEffect(deps, () => {
-            const data = callback();
-            signal.set(data);
-            if (typeof isContinue === 'function' && !isContinue(data)) {
-                unListen();
+    const component = getSetupContext(false);
+    const unListenRef = {};
+    function listen(model, deps, callback, unListenRef, isContinue) {
+        const nextListen = () => {
+            unListenRef.unListen();
+            const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
+            model.set(nextData);
+            if (typeof isContinue !== 'function' || isContinue(nextData) !== false) {
+                listen(model, nextDeps, callback, unListenRef, isContinue);
+            }
+        };
+        unListenRef.unListen = () => {
+            for (const s of deps) {
+                s[depsKey].delete(nextListen);
             }
+        };
+        for (const s of deps) {
+            s[depsKey].add(nextListen);
+        }
+    }
+    listen(signal, deps, callback, unListenRef, isContinue);
+    if (component) {
+        component.destroyCallbacks.push(() => {
+            unListenRef.unListen();
         });
     }
     return signal;
@@ -528,70 +640,6 @@ class RootComponent extends Component {
     }
 }
 
-const refKey = 'ref';
-function getObjectChanges(newProps, oldProps) {
-    const changes = {
-        remove: [],
-        add: [],
-        replace: []
-    };
-    Object.keys(newProps).forEach(key => {
-        const leftValue = newProps[key];
-        const rightValue = oldProps[key];
-        if (Reflect.has(oldProps, key)) {
-            if (leftValue !== rightValue) {
-                changes.replace.push([key, leftValue, rightValue]);
-            }
-            return;
-        }
-        changes.add.push([key, leftValue]);
-    });
-    Object.keys(oldProps).forEach(key => {
-        if (!Reflect.has(newProps, key)) {
-            changes.remove.push([key, oldProps[key]]);
-        }
-    });
-    return changes;
-}
-function classToString(config) {
-    if (!config) {
-        return '';
-    }
-    if (typeof config === 'string') {
-        return config;
-    }
-    else if (Array.isArray(config)) {
-        return config.map(i => {
-            return classToString(i);
-        }).join(' ');
-    }
-    else 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(' ');
-    }
-}
-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;
-}
-
 class RootComponentRef {
 }
 class Atom {
@@ -687,7 +735,7 @@ let Renderer = class Renderer {
     applyChanges(component, context) {
         const { atom, render } = this.componentAtomCaches.get(component);
         const diffAtom = atom.child;
-        const template = render();
+        const template = render(component.props, component.props);
         if (template) {
             this.linkTemplate(template, component, atom);
         }
@@ -708,26 +756,28 @@ let Renderer = class Renderer {
         }
         const commits = [];
         const changeCommits = {
-            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
-                commits.push(() => {
-                    const { add, remove, replace } = getObjectChanges(start.jsxNode.props, reusedAtom.jsxNode.props);
-                    if (add.length || remove.length || replace.length) {
-                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.props);
-                    }
-                    const newProps = start.jsxNode.props;
-                    start.jsxNode = reusedAtom.jsxNode;
-                    start.jsxNode.props = newProps;
-                    const { render } = this.componentAtomCaches.get(start.jsxNode);
-                    const template = render();
-                    if (template) {
-                        this.linkTemplate(template, start.jsxNode, start);
-                    }
-                    this.componentAtomCaches.set(start.jsxNode, {
+            updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
+                commits.push((offset) => {
+                    const newProps = newAtom.jsxNode.props;
+                    const oldProps = reusedAtom.jsxNode.props;
+                    newAtom.jsxNode = reusedAtom.jsxNode;
+                    const { render, template } = this.componentAtomCaches.get(newAtom.jsxNode);
+                    const newTemplate = render(newProps, oldProps);
+                    this.componentAtomCaches.set(newAtom.jsxNode, {
                         render,
-                        atom: start
+                        template,
+                        atom: newAtom
                     });
-                    if (start.child) {
-                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    if (newTemplate === template) {
+                        this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
+                        // (newAtom.jsxNode as Component).rendered()
+                        return;
+                    }
+                    if (newTemplate) {
+                        this.linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+                    }
+                    if (newAtom.child) {
+                        this.diff(newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
                     }
                     else if (reusedAtom.child) {
                         let atom = reusedAtom.child;
@@ -736,10 +786,10 @@ let Renderer = class Renderer {
                             atom = atom.sibling;
                         }
                     }
-                    start.jsxNode.rendered();
+                    newAtom.jsxNode.rendered();
                 });
             },
-            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+            updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
                 commits.push((offset) => {
                     newAtom.nativeNode = oldAtom.nativeNode;
                     const host = context.host;
@@ -770,7 +820,7 @@ let Renderer = class Renderer {
                     applyRefs();
                 });
             },
-            reuseText: (newAtom, oldAtom) => {
+            updateText: (newAtom, oldAtom) => {
                 commits.push(() => {
                     const nativeNode = oldAtom.nativeNode;
                     if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
@@ -812,6 +862,40 @@ let Renderer = class Renderer {
             commit(offset);
         }
     }
+    reuseComponentView(newAtom, reusedAtom, context, moveView) {
+        let child = reusedAtom.child;
+        newAtom.child = child;
+        const children = [];
+        while (child) {
+            children.push(child);
+            child.parent = newAtom;
+            child = child.sibling;
+        }
+        const updateContext = (atom) => {
+            if (atom.jsxNode instanceof Component) {
+                let child = atom.child;
+                while (child) {
+                    updateContext(child);
+                    child = child.sibling;
+                }
+            }
+            else {
+                if (moveView) {
+                    if (context.isParent) {
+                        this.nativeRenderer.prependChild(context.host, atom.nativeNode);
+                    }
+                    else {
+                        this.nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                    }
+                }
+                context.isParent = false;
+                context.host = atom.nativeNode;
+            }
+        };
+        for (const atom of children) {
+            updateContext(atom);
+        }
+    }
     createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
         for (let i = 0; i < oldChildren.length; i++) {
             const { atom: diffAtom, index: diffIndex } = oldChildren[i];
@@ -824,13 +908,13 @@ let Renderer = class Renderer {
             }
             if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
                 if (newAtom.jsxNode instanceof JSXElement) {
-                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 else if (newAtom.jsxNode instanceof JSXText) {
-                    changeCommits.reuseText(newAtom, diffAtom);
+                    changeCommits.updateText(newAtom, diffAtom);
                 }
                 else {
-                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 oldChildren.splice(i, 1);
                 return;
@@ -911,27 +995,20 @@ let Renderer = class Renderer {
         }
         this.componentAtomCaches.set(component, {
             render,
+            template,
             atom: from
         });
         return from;
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        // if (component.setup === Fragment) {
-        //   const children = component.props.children
-        //   return this.createChainByChildren(
-        //     component,
-        //     Array.isArray(children) ? children : [children],
-        //     parent
-        //   )
-        // }
         return new Atom(component, parent);
     }
     createChainByJSXElement(context, element, parent) {
         const atom = new Atom(element, parent);
         if (Reflect.has(element.props, 'children')) {
             const jsxChildren = element.props.children;
-            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom);
+            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
             this.link(atom, children);
         }
         return atom;
@@ -939,8 +1016,7 @@ let Renderer = class Renderer {
     createChainByJSXText(node, parent) {
         return new Atom(node, parent);
     }
-    createChainByChildren(context, children, parent) {
-        const atoms = [];
+    createChainByChildren(context, children, parent, atoms) {
         for (const item of children) {
             if (item instanceof JSXElement) {
                 atoms.push(this.createChainByJSXElement(context, item, parent));
@@ -956,7 +1032,7 @@ let Renderer = class Renderer {
                 continue;
             }
             if (Array.isArray(item)) {
-                atoms.push(...this.createChainByChildren(context, item, parent));
+                this.createChainByChildren(context, item, parent, atoms);
                 continue;
             }
             if (item !== null && typeof item !== 'undefined') {
@@ -967,7 +1043,7 @@ let Renderer = class Renderer {
     }
     linkTemplate(template, component, parent) {
         const children = Array.isArray(template) ? template : [template];
-        this.link(parent, this.createChainByChildren(component, children, parent));
+        this.link(parent, this.createChainByChildren(component, children, parent, []));
     }
     link(parent, children) {
         for (let i = 1; i < children.length; i++) {
@@ -986,7 +1062,10 @@ let Renderer = class Renderer {
                 continue;
             }
             if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, classToString(props[key]));
+                const className = classToString(props[key]);
+                if (className) {
+                    this.nativeRenderer.setClass(nativeNode, className);
+                }
                 continue;
             }
             if (key === 'style') {
@@ -999,7 +1078,7 @@ let Renderer = class Renderer {
             if (/^on[A-Z]/.test(key)) {
                 const listener = props[key];
                 if (typeof listener === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), listener);
+                    this.bindEvent(vNode, key, nativeNode, listener);
                 }
                 continue;
             }
@@ -1039,7 +1118,10 @@ let Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    const type = key.replace(/^on/, '').toLowerCase();
+                    const oldOn = oldVNode.on;
+                    this.nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
+                    Reflect.deleteProperty(oldOn, type);
                 }
                 continue;
             }
@@ -1073,12 +1155,8 @@ let Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 const listenType = key.replace(/^on/, '').toLowerCase();
-                if (typeof oldValue === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, listenType, oldValue);
-                }
-                if (typeof newValue === 'function') {
-                    this.nativeRenderer.listen(nativeNode, listenType, newValue);
-                }
+                newVNode.on = oldVNode.on;
+                newVNode.on[listenType].listenFn = newValue;
                 continue;
             }
             if (key === refKey) {
@@ -1105,7 +1183,7 @@ let Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    this.bindEvent(newVNode, key, nativeNode, value);
                 }
                 continue;
             }
@@ -1128,6 +1206,22 @@ let Renderer = class Renderer {
             }
         }
     }
+    bindEvent(vNode, key, nativeNode, listenFn) {
+        let on = vNode.on;
+        if (!on) {
+            vNode.on = on = {};
+        }
+        const type = key.replace(/^on/, '').toLowerCase();
+        const delegate = function (...args) {
+            return delegateObj.listenFn.apply(this, args);
+        };
+        const delegateObj = {
+            delegate,
+            listenFn
+        };
+        on[type] = delegateObj;
+        this.nativeRenderer.listen(nativeNode, type, delegate);
+    }
 };
 Renderer = __decorate([
     Injectable(),
@@ -1199,4 +1293,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, Memo, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };

package/bundles/index.js

@@ -44,6 +44,80 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
+const refKey = 'ref';
+function getObjectChanges(newProps, oldProps) {
+    const changes = {
+        remove: [],
+        add: [],
+        replace: []
+    };
+    Object.keys(newProps).forEach(key => {
+        const leftValue = newProps[key];
+        const rightValue = oldProps[key];
+        if (Reflect.has(oldProps, key)) {
+            if (leftValue !== rightValue) {
+                changes.replace.push([key, leftValue, rightValue]);
+            }
+            return;
+        }
+        changes.add.push([key, leftValue]);
+    });
+    Object.keys(oldProps).forEach(key => {
+        if (!Reflect.has(newProps, key)) {
+            changes.remove.push([key, oldProps[key]]);
+        }
+    });
+    return changes;
+}
+function classToString(config) {
+    if (!config) {
+        return '';
+    }
+    if (typeof config === 'string') {
+        return config;
+    }
+    else if (Array.isArray(config)) {
+        return config.map(i => {
+            return classToString(i);
+        }).join(' ');
+    }
+    else 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(' ');
+    }
+}
+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;
+}
+
+class Memo {
+    constructor(shouldUpdate, render) {
+        this.shouldUpdate = shouldUpdate;
+        this.render = render;
+    }
+}
+function withMemo(shouldUpdate, render) {
+    return new Memo(shouldUpdate, render);
+}
+
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -123,17 +197,29 @@ class Component extends di.ReflectiveInjector {
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const template = render();
+        const templateRender = render instanceof Memo ? render.render : render;
+        let template = templateRender();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
         });
         return {
             template,
-            render: () => {
+            render: (newProps, oldProps) => {
+                if (newProps !== oldProps) {
+                    const { add, remove, replace } = getObjectChanges(newProps, oldProps);
+                    if (add.length || remove.length || replace.length) {
+                        this.invokePropsChangedHooks(newProps);
+                    }
+                }
+                if (render instanceof Memo) {
+                    if (!render.shouldUpdate(newProps, oldProps)) {
+                        return template;
+                    }
+                }
                 this.unWatch();
                 signalDepsStack.push([]);
-                const template = render();
+                template = templateRender();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -165,20 +251,6 @@ class Component extends di.ReflectiveInjector {
             this.invokeUpdatedHooks();
         }
     }
-    invokePropsChangedHooks(newProps) {
-        const oldProps = this.props;
-        this.props = newProps;
-        this.propsChangedDestroyCallbacks.forEach(fn => {
-            fn();
-        });
-        this.propsChangedDestroyCallbacks = [];
-        for (const fn of this.propsChangedCallbacks) {
-            const destroyFn = fn(newProps, oldProps);
-            if (typeof destroyFn === 'function') {
-                this.propsChangedDestroyCallbacks.push(destroyFn);
-            }
-        }
-    }
     destroy() {
         this.unWatch();
         this.updatedDestroyCallbacks.forEach(fn => {
@@ -196,6 +268,20 @@ class Component extends di.ReflectiveInjector {
         this.mountCallbacks = [];
         this.updatedCallbacks = [];
     }
+    invokePropsChangedHooks(newProps) {
+        const oldProps = this.props;
+        this.props = newProps;
+        this.propsChangedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.propsChangedDestroyCallbacks = [];
+        for (const fn of this.propsChangedCallbacks) {
+            const destroyFn = fn(newProps, oldProps);
+            if (typeof destroyFn === 'function') {
+                this.propsChangedDestroyCallbacks.push(destroyFn);
+            }
+        }
+    }
     invokeMountHooks() {
         for (const fn of this.mountCallbacks) {
             const destroyFn = fn();
@@ -384,13 +470,25 @@ function useSignal(state) {
             return;
         }
         state = newState;
-        for (const fn of signal[depsKey]) {
+        const depCallbacks = Array.from(signal[depsKey]);
+        for (const fn of depCallbacks) {
+            // 回调中可能会对依赖做出修改，故需先缓存起来
             fn();
         }
     };
     signal[depsKey] = new Set();
     return signal;
 }
+function invokeDepFn(fn) {
+    const deps = [];
+    signalDepsStack.push(deps);
+    const data = fn();
+    signalDepsStack.pop();
+    return {
+        deps,
+        data
+    };
+}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -399,18 +497,32 @@ function useSignal(state) {
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
 function useDerived(callback, isContinue) {
-    const deps = [];
-    signalDepsStack.push(deps);
-    const data = callback();
-    signalDepsStack.pop();
+    let { data, deps } = invokeDepFn(callback);
     const signal = useSignal(data);
-    if (deps.length) {
-        const unListen = useEffect(deps, () => {
-            const data = callback();
-            signal.set(data);
-            if (typeof isContinue === 'function' && !isContinue(data)) {
-                unListen();
+    const component = getSetupContext(false);
+    const unListenRef = {};
+    function listen(model, deps, callback, unListenRef, isContinue) {
+        const nextListen = () => {
+            unListenRef.unListen();
+            const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
+            model.set(nextData);
+            if (typeof isContinue !== 'function' || isContinue(nextData) !== false) {
+                listen(model, nextDeps, callback, unListenRef, isContinue);
+            }
+        };
+        unListenRef.unListen = () => {
+            for (const s of deps) {
+                s[depsKey].delete(nextListen);
             }
+        };
+        for (const s of deps) {
+            s[depsKey].add(nextListen);
+        }
+    }
+    listen(signal, deps, callback, unListenRef, isContinue);
+    if (component) {
+        component.destroyCallbacks.push(() => {
+            unListenRef.unListen();
         });
     }
     return signal;
@@ -529,70 +641,6 @@ class RootComponent extends Component {
     }
 }
 
-const refKey = 'ref';
-function getObjectChanges(newProps, oldProps) {
-    const changes = {
-        remove: [],
-        add: [],
-        replace: []
-    };
-    Object.keys(newProps).forEach(key => {
-        const leftValue = newProps[key];
-        const rightValue = oldProps[key];
-        if (Reflect.has(oldProps, key)) {
-            if (leftValue !== rightValue) {
-                changes.replace.push([key, leftValue, rightValue]);
-            }
-            return;
-        }
-        changes.add.push([key, leftValue]);
-    });
-    Object.keys(oldProps).forEach(key => {
-        if (!Reflect.has(newProps, key)) {
-            changes.remove.push([key, oldProps[key]]);
-        }
-    });
-    return changes;
-}
-function classToString(config) {
-    if (!config) {
-        return '';
-    }
-    if (typeof config === 'string') {
-        return config;
-    }
-    else if (Array.isArray(config)) {
-        return config.map(i => {
-            return classToString(i);
-        }).join(' ');
-    }
-    else 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(' ');
-    }
-}
-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;
-}
-
 class RootComponentRef {
 }
 class Atom {
@@ -688,7 +736,7 @@ exports.Renderer = class Renderer {
     applyChanges(component, context) {
         const { atom, render } = this.componentAtomCaches.get(component);
         const diffAtom = atom.child;
-        const template = render();
+        const template = render(component.props, component.props);
         if (template) {
             this.linkTemplate(template, component, atom);
         }
@@ -709,26 +757,28 @@ exports.Renderer = class Renderer {
         }
         const commits = [];
         const changeCommits = {
-            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
-                commits.push(() => {
-                    const { add, remove, replace } = getObjectChanges(start.jsxNode.props, reusedAtom.jsxNode.props);
-                    if (add.length || remove.length || replace.length) {
-                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.props);
-                    }
-                    const newProps = start.jsxNode.props;
-                    start.jsxNode = reusedAtom.jsxNode;
-                    start.jsxNode.props = newProps;
-                    const { render } = this.componentAtomCaches.get(start.jsxNode);
-                    const template = render();
-                    if (template) {
-                        this.linkTemplate(template, start.jsxNode, start);
-                    }
-                    this.componentAtomCaches.set(start.jsxNode, {
+            updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
+                commits.push((offset) => {
+                    const newProps = newAtom.jsxNode.props;
+                    const oldProps = reusedAtom.jsxNode.props;
+                    newAtom.jsxNode = reusedAtom.jsxNode;
+                    const { render, template } = this.componentAtomCaches.get(newAtom.jsxNode);
+                    const newTemplate = render(newProps, oldProps);
+                    this.componentAtomCaches.set(newAtom.jsxNode, {
                         render,
-                        atom: start
+                        template,
+                        atom: newAtom
                     });
-                    if (start.child) {
-                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    if (newTemplate === template) {
+                        this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
+                        // (newAtom.jsxNode as Component).rendered()
+                        return;
+                    }
+                    if (newTemplate) {
+                        this.linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+                    }
+                    if (newAtom.child) {
+                        this.diff(newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
                     }
                     else if (reusedAtom.child) {
                         let atom = reusedAtom.child;
@@ -737,10 +787,10 @@ exports.Renderer = class Renderer {
                             atom = atom.sibling;
                         }
                     }
-                    start.jsxNode.rendered();
+                    newAtom.jsxNode.rendered();
                 });
             },
-            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+            updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
                 commits.push((offset) => {
                     newAtom.nativeNode = oldAtom.nativeNode;
                     const host = context.host;
@@ -771,7 +821,7 @@ exports.Renderer = class Renderer {
                     applyRefs();
                 });
             },
-            reuseText: (newAtom, oldAtom) => {
+            updateText: (newAtom, oldAtom) => {
                 commits.push(() => {
                     const nativeNode = oldAtom.nativeNode;
                     if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
@@ -813,6 +863,40 @@ exports.Renderer = class Renderer {
             commit(offset);
         }
     }
+    reuseComponentView(newAtom, reusedAtom, context, moveView) {
+        let child = reusedAtom.child;
+        newAtom.child = child;
+        const children = [];
+        while (child) {
+            children.push(child);
+            child.parent = newAtom;
+            child = child.sibling;
+        }
+        const updateContext = (atom) => {
+            if (atom.jsxNode instanceof Component) {
+                let child = atom.child;
+                while (child) {
+                    updateContext(child);
+                    child = child.sibling;
+                }
+            }
+            else {
+                if (moveView) {
+                    if (context.isParent) {
+                        this.nativeRenderer.prependChild(context.host, atom.nativeNode);
+                    }
+                    else {
+                        this.nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                    }
+                }
+                context.isParent = false;
+                context.host = atom.nativeNode;
+            }
+        };
+        for (const atom of children) {
+            updateContext(atom);
+        }
+    }
     createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
         for (let i = 0; i < oldChildren.length; i++) {
             const { atom: diffAtom, index: diffIndex } = oldChildren[i];
@@ -825,13 +909,13 @@ exports.Renderer = class Renderer {
             }
             if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
                 if (newAtom.jsxNode instanceof JSXElement) {
-                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 else if (newAtom.jsxNode instanceof JSXText) {
-                    changeCommits.reuseText(newAtom, diffAtom);
+                    changeCommits.updateText(newAtom, diffAtom);
                 }
                 else {
-                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 oldChildren.splice(i, 1);
                 return;
@@ -912,27 +996,20 @@ exports.Renderer = class Renderer {
         }
         this.componentAtomCaches.set(component, {
             render,
+            template,
             atom: from
         });
         return from;
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        // if (component.setup === Fragment) {
-        //   const children = component.props.children
-        //   return this.createChainByChildren(
-        //     component,
-        //     Array.isArray(children) ? children : [children],
-        //     parent
-        //   )
-        // }
         return new Atom(component, parent);
     }
     createChainByJSXElement(context, element, parent) {
         const atom = new Atom(element, parent);
         if (Reflect.has(element.props, 'children')) {
             const jsxChildren = element.props.children;
-            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom);
+            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
             this.link(atom, children);
         }
         return atom;
@@ -940,8 +1017,7 @@ exports.Renderer = class Renderer {
     createChainByJSXText(node, parent) {
         return new Atom(node, parent);
     }
-    createChainByChildren(context, children, parent) {
-        const atoms = [];
+    createChainByChildren(context, children, parent, atoms) {
         for (const item of children) {
             if (item instanceof JSXElement) {
                 atoms.push(this.createChainByJSXElement(context, item, parent));
@@ -957,7 +1033,7 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (Array.isArray(item)) {
-                atoms.push(...this.createChainByChildren(context, item, parent));
+                this.createChainByChildren(context, item, parent, atoms);
                 continue;
             }
             if (item !== null && typeof item !== 'undefined') {
@@ -968,7 +1044,7 @@ exports.Renderer = class Renderer {
     }
     linkTemplate(template, component, parent) {
         const children = Array.isArray(template) ? template : [template];
-        this.link(parent, this.createChainByChildren(component, children, parent));
+        this.link(parent, this.createChainByChildren(component, children, parent, []));
     }
     link(parent, children) {
         for (let i = 1; i < children.length; i++) {
@@ -987,7 +1063,10 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, classToString(props[key]));
+                const className = classToString(props[key]);
+                if (className) {
+                    this.nativeRenderer.setClass(nativeNode, className);
+                }
                 continue;
             }
             if (key === 'style') {
@@ -1000,7 +1079,7 @@ exports.Renderer = class Renderer {
             if (/^on[A-Z]/.test(key)) {
                 const listener = props[key];
                 if (typeof listener === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), listener);
+                    this.bindEvent(vNode, key, nativeNode, listener);
                 }
                 continue;
             }
@@ -1040,7 +1119,10 @@ exports.Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    const type = key.replace(/^on/, '').toLowerCase();
+                    const oldOn = oldVNode.on;
+                    this.nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
+                    Reflect.deleteProperty(oldOn, type);
                 }
                 continue;
             }
@@ -1074,12 +1156,8 @@ exports.Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 const listenType = key.replace(/^on/, '').toLowerCase();
-                if (typeof oldValue === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, listenType, oldValue);
-                }
-                if (typeof newValue === 'function') {
-                    this.nativeRenderer.listen(nativeNode, listenType, newValue);
-                }
+                newVNode.on = oldVNode.on;
+                newVNode.on[listenType].listenFn = newValue;
                 continue;
             }
             if (key === refKey) {
@@ -1106,7 +1184,7 @@ exports.Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    this.bindEvent(newVNode, key, nativeNode, value);
                 }
                 continue;
             }
@@ -1129,6 +1207,22 @@ exports.Renderer = class Renderer {
             }
         }
     }
+    bindEvent(vNode, key, nativeNode, listenFn) {
+        let on = vNode.on;
+        if (!on) {
+            vNode.on = on = {};
+        }
+        const type = key.replace(/^on/, '').toLowerCase();
+        const delegate = function (...args) {
+            return delegateObj.listenFn.apply(this, args);
+        };
+        const delegateObj = {
+            delegate,
+            listenFn
+        };
+        on[type] = delegateObj;
+        this.nativeRenderer.listen(nativeNode, type, delegate);
+    }
 };
 exports.Renderer = __decorate([
     di.Injectable(),
@@ -1205,6 +1299,7 @@ exports.Fragment = Fragment;
 exports.JSXComponent = JSXComponent;
 exports.JSXElement = JSXElement;
 exports.JSXText = JSXText;
+exports.Memo = Memo;
 exports.NativeRenderer = NativeRenderer;
 exports.Ref = Ref;
 exports.RootComponent = RootComponent;
@@ -1223,6 +1318,7 @@ exports.useDerived = useDerived;
 exports.useEffect = useEffect;
 exports.useRef = useRef;
 exports.useSignal = useSignal;
+exports.withMemo = withMemo;
 Object.keys(di).forEach(function (k) {
     if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
         enumerable: true,

package/bundles/model/_api.d.ts

@@ -1,3 +1,4 @@
 export * from './component';
 export * from './jsx-element';
+export * from './memo';
 export * from './root.component';

package/bundles/model/component.d.ts

@@ -1,5 +1,6 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
 import { Props, Key, JSXTypeof, JSXChildNode } from './jsx-element';
+import { Memo } from './memo';
 export declare class JSXComponent {
     props: Props;
     private factory;
@@ -7,7 +8,7 @@ export declare class JSXComponent {
     createInstance(injector: Component): Component;
 }
 export interface ComponentSetup<T extends Props<any> = Props<any>> {
-    (props?: T): () => JSXChildNode;
+    (props?: T): (() => JSXChildNode) | Memo<T>;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -35,13 +36,13 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
     addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
     init(): {
         template: JSXChildNode;
-        render: () => JSXChildNode;
+        render: (newProps: Props, oldProps: Props) => JSXChildNode;
     };
     markAsDirtied(): void;
     markAsChanged(): void;
     rendered(): void;
-    invokePropsChangedHooks(newProps: Props<any>): void;
     destroy(): void;
+    private invokePropsChangedHooks;
     private invokeMountHooks;
     private invokeUpdatedHooks;
 }

package/bundles/model/jsx-element.d.ts

@@ -21,11 +21,16 @@ export declare class JSXText implements JSXTypeof {
     constructor(text: string);
     is(target: JSXTypeof): boolean;
 }
+export interface ListenDelegate {
+    delegate: () => any;
+    listenFn: ((...args: any[]) => any) | void;
+}
 export declare class JSXElement implements JSXTypeof {
     type: string;
     props: Props<any>;
     key?: Key | undefined;
     $$typeOf: string;
+    on?: Record<string, ListenDelegate>;
     constructor(type: string, props: Props<any>, key?: Key | undefined);
     is(target: JSXTypeof): boolean;
 }

package/bundles/model/memo.d.ts

@@ -0,0 +1,10 @@
+import { JSXChildNode, Props } from './jsx-element';
+export interface ShouldUpdate<T extends Props> {
+    (currentProps: T, prevProps: T): unknown;
+}
+export declare class Memo<T extends Props> {
+    shouldUpdate: ShouldUpdate<T>;
+    render: () => JSXChildNode;
+    constructor(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode);
+}
+export declare function withMemo<T extends Props = Props>(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode): Memo<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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",
@@ -34,5 +34,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "55152a4c7db778d22e4ed1d8cd648f9800a01992"
+  "gitHead": "f3cb35e8a4c24063ea8431de7d001d801925e9d9"
 }