파이프를 사용하여 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 tutorial"]

다음으로 출력을 살펴보세요

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

getCat() 메서드가 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 表示的是: transform8번 호출된 것을 볼 수 있으며, 쓸데없는 전화가

6

있습니다. 이는 템플릿 내에서 메소드가 사용될 때 변경 감지가 발생할 때마다 angular가 해당 메소드를 호출하기 때문입니다.

리스닝 이벤트를 추가할 수 있습니다

rrreee

클릭 이벤트가 트리거될 때마다 pure 改成 false，会随变更检测调用多次，不管值发生变化没。

了解变更检测机制：

  [译]深入理解Angular onPush变更检测策略

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

这样我们通过 pipe 代替模板中的方法，就减少了 angular4

번

rrreee이건 제가 원하는 것이 아니고, 그냥 두 번 호출되기를 바랄 뿐입니다! ! ! 데이터의 양이 너무 많아서 이대로 플레이하는 것은 견딜 수 없습니다.

---

순수한 파이프

다음으로 주인공이 등장합니다. 먼저 pipe를 만듭니다rrreeepipe의 구현이 기본적으로 이전에 호출한 메서드와 동일하다는 것을 알 수 있습니다. 템플릿에 참조를 추가한 후, 결과는 이전 결과와 일치합니다. 예상대로 두 번만 호출되었습니다.

🎜이것은 pipe가 기본적으로 pure Pipe로 설정되어 있고 Pipe 데코레이터에는 다음 용도로 사용할 수 있는 pure가 있기 때문입니다. 파이프 모드를 설정하십시오. 🎜rrreee🎜🎜 그리고 pure는 transform(입력 매개변수 값) 값이 변경될 때 변경 감지 호출🎜을 따르지 않는지 여부를 나타냅니다. 🎜🎜🎜공식 설명: 파이프라인에 내부 상태가 있는 경우(즉, 결과가 매개변수뿐만 아니라 내부 상태에 따라 달라짐) pure를 false로 설정하세요. 이 경우 파이프라인은 매개변수가 변경되지 않은 경우에도 변경 감지 주기마다 한 번씩 호출됩니다. true인 경우 파이프는 순수합니다. 즉, 입력 인수가 변경될 때만 변환() 메서드가 호출됩니다. 🎜🎜🎜pure를 false로 변경하는 경우 code>는 값 변경 여부에 관계없이 변경 감지와 함께 여러 번 호출됩니다. 🎜🎜🎜변경 감지 메커니즘 이해: 🎜🎜 [번역] Angular onPush 변경 감지 전략에 대한 심층적인 이해🎜🎜https://zhuanlan.zhihu.com/p/96486260🎜🎜🎜이런 방식으로 pipe 대신 템플릿의 메서드는 angular 템플릿에서 불필요한 호출을 줄입니다. 🎜🎜🎜요약🎜🎜🎜템플릿에 포함된 데이터가 변환이나 처리가 필요한 정적 데이터인 경우 호출 방식보다 파이프를 호출하는 것이 좋습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 파이프를 사용하여 Angular 애플리케이션의 성능을 향상시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!