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的區(qū)別有點類似于call和apply的區(qū)別
from接收字符串作為參數(shù)
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作為參數(shù)
function App() {
useEffect(() => {
console.log('rx.js');
from(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello, RxJS');
}, 1000);
})).subscribe(v => console.log(v));
}, [])
RxJS 當(dāng)前的版本是6.5.3渴肉。fromPromise操作符沒有在RxJS官網(wǎng)找到批狐，應(yīng)該已經(jīng)被移除华弓。
-
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控制臺輸出結(jié)果為
image.png
-
fromEventPattern 操作符
傳入注冊監(jiān)聽及移除監(jiān)聽兩種方法的定義
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操作符考廉，目前已經(jīng)改為throwError操作符
useEffect(() => {
console.log('rx.js');
throwError('error了').subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
}, [])
-
Interval 操作符
只有一個參數(shù)，表示間隔
useEffect(() => {
console.log('rx.js');
interval(1000).subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
}, [])
-
timer 操作符
兩個參數(shù)，第一個為第一次的等待毫秒，第二個參數(shù)為后面的間隔
//第一個1會等1秒發(fā)出捷雕，后面每隔2秒發(fā)出一個遞增的值
//如果只傳一個參數(shù)，只會發(fā)出一次 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秒鐘沒有鼠標(biāo)點擊她肯，重定向到其他頁面
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') });
}, [])
