如何利用管道提高Angular應用程式的效能？

如何利用管道提高Angular應用程式的效能？本篇文章透過程式碼範例來給大家詳細介紹利用管道提高Angular應用程式效能的方法。

我們透過一個範例來示範下：

#Example

@Component({
  selector: 'my-app',
  template: `
    <p *ngFor="let user of users">
      {{ user.name }}有一只猫 {{ getCat(user.id).name }}
    </p>
  `,
  styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent {
  users = [{ id: 1, name: &#39;wang&#39; }, { id: 2, name: &#39;li&#39; }];
  cats = [{ name: &#39;Tom&#39;, userId: 1 }, { name: &#39;Jerry&#39;, userId: 2 }];

  getCat(userId: number) {
    console.log(&#39;User&#39;, userId);
    return this.cats.find(c => c.userId === userId);
  }
}

有兩組資料分別是users 與cats，可以把users 理解為傳入數據，或是其他資料來源。透過 getCat() 方法取得對應的 貓咪，這種場景再在業務開發中再熟悉不過。 最後加入全域模板直接進行一個循環輸出。 【相關教學推薦：《angular教學》】

接下來看下輸出

User 1
User 2
User 1
User 2
User 1
User 2
User 1
User 2

可以getCat() 方法呼叫了 8 次，有6 次無用呼叫。這是因為當在模板內使用方法時，angular 每次變更偵測都會呼叫其方法。

我們可以新增一個監聽事件

@HostListener('click')
clicked() { }

每當點擊事件觸發，就會呼叫4 次

User 1
User 2
User 1
User 2

這不是我想要，我只想讓它調用兩次啊！ ！ ！數據量大了這麼玩頂不住。

---

Pure Pipe

接下來就是主角登場了。我們先建立一個pipe

@Pipe({
  name: 'cat',
})
export class CatPipe implements PipeTransform {
  constructor(private appComponent: AppComponent) {}

  transform(value, property: 'name' | 'userId'): unknown {
    console.log('User', value);
    const cat = this.appComponent.cats.find(c => c.userId === value);
    if (cat) {
      return cat[property];
    }
  }
}

可以看到pipe 的實作與先前呼叫的方法基本上是一樣的，在模板中加入引用之後，卻發現結果符合之前的預期了，只呼叫了兩次。

這是因為pipe 預設是pure pipe，且Pipe 裝飾器有pure 可用來設定管道模式。

@Pipe({
  name: 'cat',
  pure: true
})

而 pure 表示的是: transform 的值(入參value)發生變更時是否 不跟隨變更偵測呼叫。

官方解釋：如果該管道具有內部狀態（也就是說，其結果會依賴內部狀態，而不僅僅依賴參數），就要把 pure 設定為 false。在這種情況下，該管道會在每個變更偵測週期中都被呼叫一次 —— 即使其參數沒有發生任何變化。 When true, the pipe is pure, meaning that the transform() method is invoked only when its input arguments change. Pipes are pure by default.

當把pure 改成false，會隨變更偵測呼叫多次，不管值發生變化沒。

了解變更檢測機制：

##  [譯]深入理解Angular onPush變更檢測策略

https://zhuanlan.zhihu.com/p/96486260

這樣我們透過

pipe 取代模板中的方法，就減少了angular 模板中不必要的呼叫。

總結

當範本中資料為靜態資料需要轉換或加工時，呼叫pipe比呼叫方法好。

更多程式相關知識，請造訪：

程式設計教學！ ！

以上是如何利用管道提高Angular應用程式的效能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！