feat: 修复shouldComponentUpdate引起的问题

Author: dyf19118

demo/src/index.tsx

@@ -1,4 +1,4 @@
-import { QuarkElement, property, customElement } from "quarkc"
+import { QuarkElement, property, customElement, state, computed } from "quarkc"
 import { Router } from "quark-router"
 import "./pages/home"
 import "./pages/sub"
@@ -14,7 +14,7 @@ declare global {
 @customElement({ tag: "my-component", style })
 class MyComponent extends QuarkElement {
   private _routes = new Router(this, [
-    {path: '/', render: () => <home-component/>},
+    {path: '/', render: () => <home-component count={this.count} />},
     {path: '/sub/:id', render: ({id}) => <sub-component id={id}/>},
     {path: '/child/*', render: () => <child-component/>},
     {path: '/child', render: () => <child-component/>},
@@ -29,16 +29,36 @@ class MyComponent extends QuarkElement {
   @property({ type: String })
   text
 
+  @state()
+  innerCount = 0;
+
+  @computed()
+  get resolvedCount() {
+    return this.count + this.innerCount;
+  }
+
   add = () => {
     // 内部事件
-    this.count += 1
+    this.innerCount += 1
   };
 
-  componentDidMount() {
-    console.log("dom loaded!", 'parent')
-    // ...
+  shouldComponentUpdate(propName, oldValue, newValue) {
+    if (propName === 'innerCount') {
+      console.log(propName, oldValue, newValue)
+      return newValue <= 10 || newValue >= 20;
+    }
+
+    return true;
   }
 
+  componentDidUpdate() {
+    console.log("parent dom updated!")
+  }
+
+  // componentDidMount() {
+  //   console.log("parent dom loaded!")
+  // }
+
   render() {
     return (
       <>
@@ -56,7 +76,7 @@ class MyComponent extends QuarkElement {
           <h1>{this.text} Quarkc</h1>
 
           <div className="card">
-            <button onClick={this.add}>count is: {this.count}</button>
+            <button onClick={this.add}>count is: {this.resolvedCount}</button>
           </div>
         </div>
         <ul>

demo/src/pages/home.tsx

@@ -1,4 +1,4 @@
-import { QuarkElement, property, customElement } from "quarkc"
+import { QuarkElement, property, customElement, watch, state, computed } from "quarkc"
 import style from "./style.less?inline"
 
 declare global {
@@ -12,16 +12,60 @@ class MyComponent extends QuarkElement {
   @property({ type: String })
   text = "hello world"
 
+  @property({ type: Number })
+  count = 0
+
+  @state()
+  loggerRunCount = 0
+
+  @state()
+  counter = 0;
+
+  private _counterTimer = 0;
+
+  initCounter() {
+    const runCounter = () => {
+      this._counterTimer = window.setTimeout(() => {
+        this.counter++;
+        runCounter();
+      }, 1000)
+    };
+    runCounter();
+  }
 
   componentDidMount() {
-    console.log("dom loaded!", 'home')
-    // ...
+    console.log("home dom loaded!")
+    this.initCounter();
+  }
+
+  componentWillUnmount() {
+    console.log('home dom will unmount');
+    window.clearTimeout(this._counterTimer);
+  }
+
+  @watch('count', { immediate: true })
+  countLogger(newVal, oldVal) {
+    console.log('home countLogger', newVal, oldVal);
+    this.loggerRunCount++;
+  }
+
+  @computed()
+  get counterGreet() {
+    console.log('home @computed counterGreet')
+    return `${this.text} ${this.counter} times`;
+  }
+
+  componentDidUpdate(propName, oldVal, newVal) {
+    console.log("home dom updated!", propName, oldVal, newVal)
   }
 
   render() {
     return (
       <div className="main">
-        home {this.text}
+        home
+        <br/>passed down count: {this.count}
+        <br />watcher run count: {this.loggerRunCount}
+        <br/>{this.counterGreet}
       </div>
     );
   }

demo4gluang/src/app-header/index.tsx

@@ -10,7 +10,6 @@ import { store } from '../store';
 
 @customElement({ tag: "app-header", style })
 class MyComponent extends connectStore(QuarkElement) {
-
   handleSwitch = () => {
     store.author = store.author === 'Sun Tzu' ? 'Guess who?' : 'Sun Tzu';
   }

demo4gluang/src/gluang.ts

@@ -15,19 +15,25 @@ export const connectStore = superclass => {
     constructor() {
         super();
         this._observers = [];
+    }
 
-        // 区分 lit（lit 中存在 performUpdate）
-        if(!this.performUpdate) {
-          console.log('before update')
-          this.update(); // quarkc 中先去执行
-        }
+    connectedCallback() {
+      // 区分 lit（lit 中存在 performUpdate）
+      if(!this.performUpdate) {
+        this.update(true); // quarkc 中先去执行
+      }
     }
 
     // Your framework need this function to init observe state
-    update() {
-      console.log('gluang update')
+    update(init = false) {
       stateRecorder.start();
-      super.update();
+
+      if (!init) {
+        super.update();
+      } else {
+        super.connectedCallback();
+      }
+
       this._initStateObservers();
     }
 

packages/core/src/computed.ts

@@ -25,21 +25,21 @@ const queueMicroTask = (callback: (...args: any[]) => any) => {
   }
 };
 
-const flushUpdatedQueue = (watchers: Watcher[]) => {
-  let i = watchers.length
-
-  while (i--) {
-    const watcher = watchers[i]
-    const {
-      render,
-      inst,
-    } = watcher
-
-    if (render && inst) {
-      inst.flushUpdatedQueue()
-    }
-  }
-}
+// const flushUpdatedQueue = (watchers: Watcher[]) => {
+//   let i = watchers.length
+
+//   while (i--) {
+//     const watcher = watchers[i]
+//     const {
+//       render,
+//       inst,
+//     } = watcher
+
+//     if (render && inst) {
+//       inst.flushUpdatedQueue()
+//     }
+//   }
+// }
 
 /** flush watcher queue */
 const flushWatcherQueue = () => {
@@ -49,7 +49,7 @@ const flushWatcherQueue = () => {
     watcher.run()
   }
 
-  flushUpdatedQueue(watchers)
+  // flushUpdatedQueue(watchers)
 
   // reset
   watchers.length = 0