Ionic ion-slides 性能问题，方法调用过于频繁

Question

我对 ion-slides 组件有疑问。我在 ion-slide 中调用了一个方法，但注意到这个方法被称为 RIDICULOUSLY OFTEN，我不知道为什么。它还会显着减慢一切。

最初，该方法被调用了 900 次（尽管我只显示了 100 张幻灯片），并且幻灯片的最轻微拖动再次触发 900 次方法调用，因此只需从第一张幻灯片滑动到第二张幻灯片，该方法已被触发5000 多次，具体取决于我滑动的速度。

任何想法为什么？我正在使用 Ionic 4.4、Angular 5.0.3 和 Ionic-Angular 3.9.2。

模板

<ion-content>
  <ion-slides>
    <ion-slide *ngFor="let slide of slides">
      <div>
        {{slide}} - {{myMethod()}}
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

组件

@Component({
  selector: 'page-my',
  templateUrl: 'my-page.html'
})
export class MyPage implements OnInit {

  slides: number[] = [];
  methodCounter: number = 0;

  ngOnInit() {
    let numberOfSlides = 100;
    for (var i = 0; i < numberOfSlides; i++) {
      this.slides[i] = i;
    }
  }

  public myMethod(): string {
    console.log('myMethod called ' + this.methodCounter++);
    return 'foo';
  }
}

https://www.youtube.com/watch?v=5-L4ZOIX5Ew

Answer 1

我建议将组件上的 ChangeDetectionStrategy 更改为“OnPush”：（在此处查看更多信息：angular change detection explained）

之后您的组件将如下所示：

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'page-my',
  templateUrl: 'my-page.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyPage implements OnInit {

  slides: number[] = [];
  methodCounter: number = 0;

  ngOnInit() {
    let numberOfSlides = 100;
    for (var i = 0; i < numberOfSlides; i++) {
      this.slides[i] = i;
    }
  }

  public slideChanged(): void {
    console.log('slide changed');
    this.cd.markForCheck();
  }

  public myMethod(): string {
    console.log('myMethod called ' + this.methodCounter++);
    return 'foo';
  }
}

您的 html 模板如下所示：

<ion-slides (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let slide of slides">
      <div>
        {{slide}} - {{myMethod()}}
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

说明：

随着 ChangeDetectionStrategy 的更改，您基本上可以告诉 Angular，您知道它应该何时重新渲染组件，如果发生此事件，您可以通过调用 markForCheck() 来告诉它。因此，每次幻灯片更改时，都会调用 slideChanged() 方法，并且我们明确告诉 Angular 它应该重新渲染该组件。当组件重新渲染时，方法myMethod() 应该再次执行并显示更新的内容。这样您就拥有了一个性能更高的组件，并且方法 myMethod() 仅在初始化时或您明确告知时调用。