30天精通 RxJS (01)-代碼升級V6

簡書上轉載有一個臺灣同胞寫的關于RxJs非常好的系列文章-30天精通RxJS。
但是上面的例子都是基于RxJs V5版本寫的,但是目前(2019-9)Rx.Js從npm下載的已經(jīng)是6.5.3版本。他提供的例子需要一些修改。
為了方便調(diào)試和驗證。我把例子都寫在Create-react-app生成的初始項目的app.js里面了。
所以可能需要一點React及React Hooks的知識。
下面是第一篇的代碼升級:

//先安裝Rx.JS  npm install rxjs

import React, { useState, useEffect } from 'react';
import './App.css';
import { fromEvent} from 'rxjs';
import { take } from 'rxjs/operators';


function App() {
  useEffect(() => {
    console.log('rx.js');
    fromEvent(document.body, 'click').pipe( // 注冊監(jiān)聽
      take(1) // 只取一次
    )
      .subscribe(e => console.log(e));
  }, [])

  return (
    <div className="App">
      <h1>Rx.Js</h1>
    </div>
  );
}

export default App;
//注意的是 由于body里面的內(nèi)容很少,只有鼠標點擊h1標簽附近才能觸發(fā)事件。
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容