• Angular CD Part2


    这篇我们再次聊聊 Angular 的 CD

    参考文档

    Zone vs ngZone

    • zone.js, 它是 js 异步执行的上下文。凡事通过zone.run(func),都是在 zone 的上下文中。
      zone.js, 它通过封装了一些常见的异步操作的方法,例如 setTimeout/xhr/promise/onxxxlist,我们一旦嵌入 zone.js 到我们的代码中,凡是调用如上异步的方法,其实调用的都是 zone 封装的这些方法,从而达到对这些方法进行接管,类似于后端里面的 AOP, 推荐两个链接了解 zone link1, link2
    • ngZone, Angular 是继承于 zone.js,同时提供了实现的三个 HookAPI, 那么 Angular 是如何激发 CD,其实它在onTurnDone()这个 HookAPI 里面做的。
      • onTurnStart()
      • onTurnDone() 当异步事件执行结束,同时所有的 MicroTask 执行结束后,emit 这个事件。
      • onEventDone()
        这里提供一个简单的代码
    class ApplicationRef {
    
      changeDetectorRefs:ChangeDetectorRef[] = [];
    
      constructor(private zone: NgZone) {
        this.zone.onTurnDone
          .subscribe(() => this.zone.run(() => this.tick());
      }
    
      tick() {
        this.changeDetectorRefs
          .forEach((ref) => ref.detectChanges());
      }
    }
    

    总结一下,也就是说,Angular 通过 ngZone,以及继承来的 zone,对于所有的异步操作,例如,setTimeout/Promise/onxxx/xhr, 都会有感知,然后,在这些异步方法执行结束后,在onTurnDone()钩子里面激发整个 VDomTree 做更新检测。

    • 那么同样的对于mousemove这种事件,很容易造成性能问题,ngZone提供了两种方式,来规避这个问题
      ngZone.runOutofAngularZone(func), ngZone.run(func)
  • 相关阅读:
    伸缩布局
    布局样式
    求最小子数组01
    构建之法阅读笔记02
    第四周学习进度条
    随机生成四则运算03
    用户随机输入一组整数求出最大值
    第三周学习进度条
    随机生成四则运算表达式02
    jsp函数的使用
  • 原文地址:https://www.cnblogs.com/kongshu-612/p/15382678.html
Copyright © 2020-2023  润新知