何时使用zone.run()？

Question

我试着读了很多关于NgZone的角度的文章。我要知道角用zone.js来检测变化。我看到了一些使用zone.run的代码，并在其中放置了很少的操作。

它实际上是做什么的？

不过，我还是不知道zone.run的实际使用情况。

this.zone.run(() => {
     /* my code here */
});

在这个链接的帮助下，我有点理解了。

Answer 1

答案本身就是在你提到的博客中提供的。我会试着把它进一步分解。在给定实例中：

情境:您正在创建一个progress-bar组件，它的值将每10毫秒更新一次。

无NgZone

单击button后，将使用函数调用increaseProgress() (该函数的值将在进度条完成后显示)

    <button (click)="processWithinAngularZone()">
      Process within Angular zone
    </button>

它每10毫秒调用一次，并不断增加this.progress计数器直到100。

increaseProgress(doneCallback: () => void) {
  this.progress += 1;
  console.log(`Current progress: ${this.progress}%`);

  if (this.progress < 100) {
    window.setTimeout(() => {
      this.increaseProgress(doneCallback);
    }, 10);
  } else {
    doneCallback();
  }
}

这是可行的，但是由于我们使用的是setTimeout__，，因此将触发每个 10 milliseconds ，这将影响应用程序的性能。

用NgZone

有了ngZone，我们就通过了，zone.run()而不是console.log。一旦计数器完成，这基本上就会成为ChangeDetection的触发器。

现在，为了避免setTimeout (触发猴子补丁的ChangeDetection__because )的影响，我们将整个执行块封装在this.zone.runOutsideAngular中。只有当我们显式调用ChangeDetection时才会调用zone.run()。

  this.zone.runOutsideAngular(() => {
    this.increaseProgress(() => {
      this.zone.run(() => {
        console.log('Outside Done!');
      });
    });
  });

类似用例：

1. 假设您需要在scrollEvent上实现一些逻辑，这可能会触发一个可能导致触发ChangeDetection的函数。为了避免这种情况，我们可以使用zone.runOutsideAngular并在使用zone.run()的特定操作/持续时间之后手动触发ChangeDetection。
2. 您正在使用某个第三方库(它在角ChangeDetection之外工作)，在第三方库的某些事件发生后，您需要手动触发CD。

它不是很频繁地使用这一点，但是的，它可以创造不想要的行为时，不知道。

我希望它能帮助你更好地理解这个概念。