06篇主要講的是 creation operator。

原文參考鏈接 http://www.itdecent.cn/p/4ef56f1f5b0f

• 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ū)別有點(diǎn)類似于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 操作符

只有一個(gè)參數(shù)，表示間隔

useEffect(() => {
    console.log('rx.js');
    interval(1000).subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
  }, [])

• timer 操作符

兩個(gè)參數(shù)，第一個(gè)為第一次的等待毫秒，第二個(gè)參數(shù)為后面的間隔

  //第一個(gè)1會等1秒發(fā)出，后面每隔2秒發(fā)出一個(gè)遞增的值
  //如果只傳一個(gè)參數(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);
  }, [])

下面是個(gè)自己寫的小demo，檢測10秒鐘沒有鼠標(biāo)點(diǎn)擊，重定向到其他頁面

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') });
  }, [])