TASK: #105604-(perf)optimize indicator-page-point.

src/components/indicator/indicator-page-point.ts

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit'
+import {html, css, LitElement, PropertyValueMap} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import {classMap} from 'lit/directives/class-map.js'
 
@@ -9,16 +9,13 @@ export class IndicatorPagePoint extends LitElement {
   @property({type: Boolean, reflect: true}) edit = false
   @property({type: Boolean, reflect: true}) column = false
 
-  updated() {
-    this.checkProperties()
-  }
+  #firstRender = true
+
+  protected shouldUpdate(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): boolean {
+    let isShouldUpdate = true
 
-  /**
-   * 初始值及修改后的值检查
-   *
-   * hasChange 无法影响标签上的属性值显示，且无法访问 this
-   */
-  checkProperties(): void {
     if (this.total < 1) {
       console.warn(
         'indicator total setted a error num: ',
@@ -26,6 +23,7 @@ export class IndicatorPagePoint extends LitElement {
         ' will be resetted 1'
       )
       this.total = 1
+      isShouldUpdate = false
     } else if (this.total > 15) {
       console.warn(
         'indicator total setted a error num: ',
@@ -33,6 +31,7 @@ export class IndicatorPagePoint extends LitElement {
         ' will be resetted 15'
       )
       this.total = 15
+      isShouldUpdate = false
     }
 
     if (this.index < 1) {
@@ -42,6 +41,7 @@ export class IndicatorPagePoint extends LitElement {
         ' will be resetted 1'
       )
       this.index = 1
+      isShouldUpdate = false
     } else if (this.index > this.total) {
       console.warn(
         'indicator index setted a error num: ',
@@ -50,7 +50,14 @@ export class IndicatorPagePoint extends LitElement {
         this.total
       )
       this.index = this.total
+      isShouldUpdate = false
     }
+
+    if (this.#firstRender === true) {
+      this.#firstRender = false
+      return true
+    }
+    return isShouldUpdate
   }
 
   render() {

src/test/panels/indicators/indicators.ts

@@ -35,15 +35,8 @@ export class PanelIndicators extends LitElement {
           case 'index--':
             this.index--
             break
-          case 'edit-add':
-            Array.prototype.forEach.call(this.myindicators, (e) =>
-              e.setAttribute('edit', '')
-            )
-            break
-          case 'edit-remove':
-            Array.prototype.forEach.call(this.myindicators, (e) =>
-              e.removeAttribute('edit')
-            )
+          case 'toggle-edit':
+            this.edit = !this.edit
             break
         }
     }
@@ -81,14 +74,14 @@ export class PanelIndicators extends LitElement {
           <button data-action="total--" @click=${this}>total--</button>
           <button data-action="index++" @click=${this}>index++</button>
           <button data-action="index--" @click=${this}>index--</button>
-          <button data-action="edit-add" @click=${this}>add edit</button>
-          <button data-action="edit-remove" @click=${this}>remove edit</button>
+          <button data-action="toggle-edit" @click=${this}>toggle edit</button>
         </div>
       </div>
       <indicator-page-point
         class="myindicator"
         total=${this.total}
         index=${this.index}
+        ?edit=${this.edit}
       ></indicator-page-point>
       <div>
         <div>
@@ -96,12 +89,14 @@ export class PanelIndicators extends LitElement {
             class="myindicator"
             total=${this.total}
             index=${this.index}
+            ?edit=${this.edit}
             column
           ></indicator-page-point>
           <indicator-page-point
             class="myindicator"
             total=${this.total}
             index=${this.index}
+            ?edit=${this.edit}
             column
           ></indicator-page-point>
         </div>