0

我试图了解使用 ChangeDetectionStrategy.OnPush 的优势。因此，在 OnPush 策略可能有帮助的基本示例中编写了一些组件。
Stackblits：https
://stackblitz.com/edit/angular-stgymt App Co html：

 <h1>{{title}}</h1>
    <button (click)="onClick()">Click</button>
    <button (click)="changeTitle()">Change Title</button>


<app-movies
  [movies]="movies"
></app-movies>

应用成本：

title = 'app';
  movies = [];
  count = 0;
  constructor() {
    const movies = [];
    for (let i = 0; i < 1000; i++) {
      movies.push({
        title: 'm' + i,
        prop1: 1,
        prop2: 1,
        prop3: 1,
        prop4: 1,
        prop5: 1,
        prop6: 1,
        prop7: 1,
        prop8: 1,
        prop9: 1,
        prop10: 1
      });
    }
    this.movies = movies;
  }
  onClick() {
    const mCopy = this.movies.slice(0);
    mCopy.push({title: '10', elements: [1.9]});
    this.movies = [...mCopy];
    this.count++;
  }
  changeTitle() {
    this.title = `${this.count}`;
    this.count++;
  }

电影公司 html:

<div *ngFor="let movie of movies">
<app-movie
  [movie] = movie
></app-movie>
</div>

和电影公司 html ：

<p>{{movie.title}}: </p>
<span>{{movie.prop1}}</span>
<span>{{movie.prop2}}</span>
<span>{{movie.prop3}}</span>
<span>{{movie.prop4}}</span>
<span>{{movie.prop5}}</span>
<span>{{movie.prop6}}</span>
<span>{{movie.prop7}}</span>
<span>{{movie.prop8}}</span>
<span>{{movie.prop9}}</span>
<span>{{movie.prop10}}</span>

OnDefault 策略，如果我通过按钮更改标题，我期望的是电影组件，它的子组件也应该运行检测机制。但他们不跑。这与 OnPush 的行为完全相同。
我通过 Chrome 开发者工具中的性能监视器检查了这两种情况，并没有看到任何性能成就。
那么使用 OnPush 策略有什么意义呢？谢谢！

4

0 回答 0