Angular 中的 asyncPipe 源码探究

更新日期: 2020-02-17阅读: 1.6k标签: 源码
它是最优雅的订阅observable 的方式,不仅语法短小精悍,还会自动取消订阅;

async 管道用于解包异步原始数据。说到异步数据,就自然而然的会想起 observable 和 promise, async 就是用来订阅他们,然后返回他们发布的最近一个值,然后将组件标记为变更做准备。当组件被销毁时,async 会自动取消订阅以防内存泄漏。

来看看它的源码中的具体实现:

    @Pipe({name: 'async', pure: false})
    export class AsyncPipe implements OnDestroy, PipeTransform {
      //  是在视图引擎上渲染的数据,通常称为展示数据
      private _latestValue: any = null;
      private _latestReturnedValue: any = null;
    
      private _subscription: SubscriptionLike|Promise<any>|null = null;
    	
    	// this.obj 是我们保存在管道中的observable 的状态
      private _obj: Observable<any>|Promise<any>;
      private _strategy: SubscriptionStrategy = null !;
    
      constructor(private _ref: ChangeDetectorRef) {}
    
      ngOnDestroy(): void {
        if (this._subscription) {
          this._dispose();
        }
      }
    	
    	// obj 是我们传入的异步数据源
      transform(obj: Observable<any>|Promise<any>): any {
        if (!this._obj) {
          if (obj) {
    				console.log('Async: start subscription');
            this._subscribe(obj);
          }
    			console.log('Async: initial value = ' + this.lastestValue);
          this._latestReturnedValue = this._latestValue;
          return this._latestValue;
        }
    
    		// 保证是同一个异步数据源,当不是同一个observable,销毁上一次的订阅,订阅这次的异步数据
        if (obj !== this._obj) {
          this._dispose();
          return this.transform(obj as any);
        }
      }
    
      private _subscribe(obj: Observable<any>|Promise<any>|EventEmitter<any>): void {
        this._obj = obj;
        this._subscription = this._strategy.createSubscription(
            obj, (value: Object) => this._updateLatestValue(obj, value));
      }
    
      private _dispose(): void {
        this._strategy.dispose(this._subscription !);
        this._latestValue = null;
        this._latestReturnedValue = null;
        this._subscription = null;
        this._obj = null;
      }
    
      private _updateLatestValue(async: any, value: Object): void {
        if (async === this._obj) {
          this._latestValue = value;
          this._ref.markForCheck();
        }
      }
    }

从源码中可以看出,当一个 async pipe 被创建时,它会在每一次的变更检测循环中调用 transform();

在transform()中,会先判断管道中是否已有数据源,如果没有,则会创建一个对于该异步数据源的订阅,这其中包括将数据源赋给管道中存储的数据源,同时改值会在 dom 上被渲染,并且视图标记为变更待检测。

如果已有数据,就会判断这次的数据源和上次的数据源是不是同一个,如果不是同一个,则销毁上一次的订阅,订阅此次的异步数据;

这样我们可以重复使用 async 管道里的最新值并维护单个订阅,这有益于应用的性能和可维护性。


async pipe 的重置和完成

重置:如果 异步数据源发生变更,async 管道会自动取消订阅,做好清理工作。然后订阅新的 observable。源码如下:

 if (obj !== this._obj) {
      this._dispose();
      return this.transform(obj as any);
    }

完成:如果 observable 完成,停止发布,最新的值会被在 dom上渲染;但是 async 管道在每次变更检测周期还是会触发 transform 直到它被销毁(组件销毁,dom 销毁); 这里会产生多余的触发,引起性能问题;


优化:使用 onPush 进行优化

异步管道在每个变更检测周期调用 transform(),因为它是一个不纯的管道。对于每次调用转换,async 管道都会执行一次检查,以确定最新的值是否发生了变更,如果没有,则提前返回;看源码:

if (ɵlooseIdentical(this._latestValue, this._latestReturnedValue)) {
      return this._latestReturnedValue;
}

我们可以避免这些冗余的检测。所以 async 管道用 ChangeDectionStrategey.onPush 的父组件。当组件使用这个策略时,仅仅会在被标为变更时才会调用 transfrom;

当一个值被 async 管道订阅的 observable 发布时,它会通过 markForCheck() 将视图标记为变更待检测。这意味着只有当obervable 发布值时,他才会告诉组件需要重新渲染了。源码如下:

private _subscribe(obj: Observable<any>|Promise<any>|EventEmitter<any>): void {
    this._obj = obj;
    this._strategy = this._selectStrategy(obj);
    this._subscription = this._strategy.createSubscription(
        obj, (value: Object) => this._updateLatestValue(obj, value));
}

private _updateLatestValue(async: any, value: Object): void {
    if (async === this._obj) {
      this._latestValue = value;
      this._ref.markForCheck();
    }
}

注意: 尽管 on-push 可以提高组件的性能,但必须谨慎的使用它,并且只在适用时使用它,不正确的使用 on-push 可能会导致视图未按预期更新的bug;


总结

  • 使用一个异步管道避免冗余订阅;自动取消订阅,可以避免产生内存泄漏;这个也可以使用 rxjs 中的 takeUntil, 它也会取消订阅;
  • 使用 rxjs 中的 combineLatest 将数据组合进一个 async 管道中;
  • 只有在应用有需要的时候使用 async 管道和 on-push 策略, 并且要谨慎使用;


链接: https://www.fly63.com/article/detial/8254

Js中的 forEach 源码

在日常 Coding 中,码农们肯定少不了对数组的操作,其中很常用的一个操作就是对数组进行遍历,查看数组中的元素,然后一顿操作猛如虎。今天暂且简单地说说在 JavaScript 中 forEach。

微信小程序代码源码案例大全

克隆项目代码到本地(git应该都要会哈,现在源码几乎都会放github上,会git才方便,不会的可以自学一下哦,不会的也没关系,gitHub上也提供直接下载的链接);打开微信开发者工具;

Node 集群源码初探

随着这些模块逐渐完善, Nodejs 在服务端的使用场景也越来越丰富,如果你仅仅是因为JS 这个后缀而注意到它的话, 那么我希望你能暂停脚步,好好了解一下这门年轻的语言,相信它会给你带来惊喜

Vue源码之实例方法

在 Vue 内部,有一段这样的代码:上面5个函数的作用是在Vue的原型上面挂载方法。initMixin 函数;可以看到在 initMixin 方法中,实现了一系列的初始化操作,包括生命周期流程以及响应式系统流程的启动

vue源码解析:nextTick

nextTick的使用:vue中dom的更像并不是实时的,当数据改变后,vue会把渲染watcher添加到异步队列,异步执行,同步代码执行完成后再统一修改dom,我们看下面的代码。

React源码解析之ReactDOM.render()

React更新的方式有三种:(1)ReactDOM.render() || hydrate(ReactDOMServer渲染)(2)setState(3)forceUpdate;接下来,我们就来看下ReactDOM.render()源码

React源码解析之ExpirationTime

在React中,为防止某个update因为优先级的原因一直被打断而未能执行。React会设置一个ExpirationTime,当时间到了ExpirationTime的时候,如果某个update还未执行的话,React将会强制执行该update,这就是ExpirationTime的作用。

扒开V8引擎的源码,我找到了你们想要的前端算法

算法对于前端工程师来说总有一层神秘色彩,这篇文章通过解读V8源码,带你探索 Array.prototype.sort 函数下的算法实现。来,先把你用过的和听说过的排序算法都列出来:

jQuery源码之extend的实现

extend是jQuery中一个比较核心的代码,如果有查看jQuery的源码的话,就会发现jQuery在多处调用了extend方法。作用:对任意对象进行扩;’扩展某个实例对象

vuex源码:state及strict属性

state也就是vuex里的值,也即是整个vuex的状态,而strict和state的设置有关,如果设置strict为true,那么不能直接修改state里的值,只能通过mutation来设置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!