60人参与 • 2024-08-01 • AngularJs
subject和behaviorsubject是rxjs中两种常用的subject类型。
概念:
subject:
behaviorsubject:
区别:
初始值:
subject
在创建时不需要指定初始值,而且第一个订阅者只会收到subject
之后调用next()
方法推送的值。behaviorsubject
在创建时需要指定一个初始值,这个初始值会立即发送给所有订阅者,无需等待调用next()
方法。订阅时机:
subject
,如果订阅发生在next()
方法之后,订阅者将不会收到之前已经通过next()
方法推送的值。behaviorsubject
,无论订阅发生在何时,订阅者都会立即收到最新的值,包括初始值和之后通过next()
方法推送的值。缓存最新值:
subject
不会缓存最新的值,每次调用next()
方法都会向所有订阅者发送新值。behaviorsubject
会保存最新推送的值,无论是通过next()
方法推送的值还是初始值,并在有新订阅者订阅时立即发送这个最新值给订阅者。behaviorsubject
时,它会立即收到缓存的最新值,即使之前已经有值被推送过,而不是等待下一次值的推送。示例:
两者明显的区别在于subject
不会缓存最新的值,而behaviorsubject
会缓存最新的值,并在有新的订阅者订阅时立即发送这个最新值给订阅者。下面是有关详细说明这两者之间的区别的代码示例:
subject
和一个behaviorsubject
,并分别订阅它们:import { subject, behaviorsubject } from 'rxjs';
// 创建一个 subject
const subject = new subject<number>();
// 创建一个 behaviorsubject,初始值为0
const behaviorsubject = new behaviorsubject<number>(0);
// 订阅 subject
subject.subscribe(value => console.log('subject subscription:', value));
// 订阅 behaviorsubject
behaviorsubject.subscribe(value => console.log('behaviorsubject subscription:', value));
subject
和behaviorsubject
推送值,并再次订阅它们: // 向 subject 推送值
subject.next(1);
// 向 behaviorsubject 推送值
behaviorsubject.next(1);
// 再次订阅 subject
subject.subscribe(value => console.log('subject subscription 2:', value));
// 再次订阅 behaviorsubject
behaviorsubject.subscribe(value => console.log('behaviorsubject subscription 2:', value));
subject subscription: 1
behaviorsubject subscription: 0
behaviorsubject subscription: 1
subject subscription 2: 1
behaviorsubject subscription 2: 1
示例总结:
上面的示例很好的说明了它们最明显的区别:会不会缓存最新的值。什么叫会缓存最新的值呢?
简单来说就是:
缓存最新值就是保存了最新值的意思,也就是说behaviorsubject 从它订阅开始就一定会收到值,要不就是初始值,要不就是最新一次的next()方法的传递的值。换句话说,behaviorsubject从订阅开始就会向订阅者发送值,确保订阅者能够获取到初始值或者最新值。但是subject对象是收到从它订阅开始之后next()传递的最新值,订阅时不会收到任何值!
误区:
对于behaviorsubject对象,每次调用next()
方法,observer只会收到一个新的值,不会重复收到之前的值,也就是不会累积之前的值,因为它缓存的是最新的值,并不是缓存所有值!
举例说明:
import { behaviorsubject } from 'rxjs';
const behaviorsubject = new behaviorsubject<number>(0);
// observer在behaviorsubject初始化时订阅
behaviorsubject.subscribe(value => console.log('observer 1:', value));
// 调用next()方法传递新值
behaviorsubject.next(1);
// observer再次订阅
behaviorsubject.subscribe(value => console.log('observer 2:', value));
// 再次调用next()方法传递新值
behaviorsubject.next(2);
//运行以上代码后,我们可以看到以下输出:
observer 1: 0
observer 1: 1
observer 2: 1
observer 1: 2
observer 2: 2
您想发表意见!!点此发布评论
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。
发表评论