How to improve the performance of Angular applications using pipes?

How to use pipelines to improve the performance of Angular applications? This article uses code examples to give you a detailed introduction to how to use pipelines to improve the performance of Angular applications.

Let’s demonstrate it through an example:

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);
  }
}

There are two sets of data, respectivelyusers and cats, users can be understood as incoming data or other data sources. Obtain the corresponding cat through the getCat() method. This scenario is very familiar in business development. Finally, add a global template to directly perform a loop output. [Related tutorial recommendations: "angular tutorial"]

Next look at the output

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

You cangetCat() method is called 8 times, there are 6 useless calls. This is because when a method is used inside a template, angular its method will be called every time change detection occurs.

We can add a listening event

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

Whenever the click event is triggered, it will be called 4 times

User 1
User 2
User 1
User 2

This is not what I want, I I just want it to be called twice! ! ! The amount of data is so large that it is unbearable to play like this.

---

Pure Pipe

The next step is the protagonist’s appearance. We first create a 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];
    }
  }
}

. You can see that the implementation of pipe is basically the same as the method called before. After adding the reference to the template, we found the result In line with previous expectations, it was only called twice.

This is because pipe defaults to pure pipe, and the Pipe decorator has pure that can be used to set the pipe mode .

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

And pure represents: whether the change detection call will not be followed when the value of transform (input parameter value) changes.

Official explanation: If the pipeline has internal state (that is, its result will depend on the internal state, not just the parameters), set pure to false. In this case, the pipeline will be called once in every change detection cycle - even if its parameters have not changed. When true, the pipe is pure, meaning that the transform() method is invoked only when its input arguments change. Pipes are pure by default.

When pure is changed to false, will be called multiple times with change detection, regardless of whether the value changes.

Understand the change detection mechanism:

[Translation] In-depth understanding of Angular onPush change detection strategy

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

In this way, we replace the methods in the template with pipe, which reduces unnecessary calls in the angular template.

Summary

When the data in the template is static data that needs to be converted or processed, calling pipe is better than calling method.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to improve the performance of Angular applications using pipes?. For more information, please follow other related articles on the PHP Chinese website!