06篇主要讲的是 creation operator。
-
of 操作符
import React, { useState, useEffect } from 'react';
import { of } from 'rxjs';
function App() {
useEffect(() => {
console.log('rx.js');
of('Jerry','Anna').subscribe(v=>console.log(v));
}, [])
return (
<div className="App">
<h1>Rx.Js</h1>
</div>
);
}
export default App;
-
from 操作符
function App() {
useEffect(() => {
console.log('rx.js');
from(['Jerry','Anna','test']).subscribe(v=>console.log(v));
}, [])
return (
<div className="App">
<h1>Rx.Js</h1>
</div>
);
}
from和of的区别有点类似于call和apply的区别
from接收字符串作为参数
function App() {
useEffect(() => {
console.log('rx.js');
from('Jerry').subscribe(v=>console.log(v));
}, [])
return (
<div className="App">
<h1>Rx.Js</h1>
</div>
);
}
from接收Promise作为参数
function App() {
useEffect(() => {
console.log('rx.js');
from(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello, RxJS');
}, 1000);
})).subscribe(v => console.log(v));
}, [])
RxJS 当前的版本是6.5.3。fromPromise操作符没有在RxJS官网找到,应该已经被移除。
-
fromEvent 操作符
function App() {
useEffect(() => {
console.log('rx.js');
fromEvent(document.body,'click')
.subscribe(v => console.log(v));
}, [])
return (
<div className="App">
<h1>Rx.Js</h1>
</div>
);
}
chrome控制台输出结果为

-
fromEventPattern 操作符
传入注册监听及移除监听两种方法的定义
import React, { useState, useEffect } from 'react';
import { fromEventPattern } from 'rxjs';
class Producer {
constructor() {
this.listeners = [];
}
addListener(listener) {
if (typeof listener === 'function') {
this.listeners.push(listener)
} else {
throw new Error('listener 必须是 function')
}
}
removeListener(listener) {
this.listeners.splice(this.listeners.indexOf(listener), 1)
}
notify(message) {
this.listeners.forEach(listener => {
listener(message);
})
}
}
function App() {
useEffect(() => {
console.log('rx.js');
const egghead = new Producer();
fromEventPattern(
(handler) => egghead.addListener(handler),
(handler) => egghead.removeListener(handler)
).subscribe(v => console.log(v));
egghead.notify('Hello! Can you hear me?');
}, [])
return (
<div className="App">
<h1>Rx.Js</h1>
</div>
);
}
export default App;
-
Empty 操作符
//直接输出complete
useEffect(() => {
console.log('rx.js');
empty().subscribe(v => console.log(v), e => console.log(e), () => console.log('complete'));
}, [])
-
Never 操作符
useEffect(() => {
console.log('rx.js');
never().subscribe(v => console.log(v), e => console.log(e), () => console.log('complete'));
}, [])
-
throwError 操作符
原文叫throw操作符,目前已经改为throwError操作符
useEffect(() => {
console.log('rx.js');
throwError('error了').subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
}, [])
-
Interval 操作符
只有一个参数,表示间隔
useEffect(() => {
console.log('rx.js');
interval(1000).subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
}, [])
-
timer 操作符
两个参数,第一个为第一次的等待毫秒,第二个参数为后面的间隔
//第一个1会等1秒发出,后面每隔2秒发出一个递增的值
//如果只传一个参数,只会发出一次 1 ,然后就complete了
useEffect(() => {
console.log('rx.js');
timer(1000,2000).subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
}, [])
取消订阅
useEffect(() => {
console.log('rx.js');
const subscription = interval(1000).subscribe(v => console.log(v,typeof v), e => console.error(e), () => console.log('complete'));
setTimeout(()=>{
subscription.unsubscribe();
},7000);
}, [])
下面是个自己写的小demo,检测10秒钟没有鼠标点击,重定向到其他页面
useEffect(() => {
console.log('rx.js');
interval(1000).pipe(takeUntil(fromEvent(document.body, 'click')), repeat())
.subscribe(v => v === 10 && window.location.href='http://***', e => console.error(e), () => { console.log('complete') });
}, [])
网友评论