30天精通 RxJS (01)-代码升级V6

简书上转载有一个台湾同胞写的关于RxJs非常好的系列文章-30天精通RxJS。
但是上面的例子都是基于RxJs V5版本写的,但是目前(2019-9)Rx.Js从npm下载的已经是6.5.3版本。他提供的例子需要一些修改。
为了方便调试和验证。我把例子都写在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( // 注册监听
      take(1) // 只取一次
    )
      .subscribe(e => console.log(e));
  }, [])

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

export default App;
//注意的是 由于body里面的内容很少,只有鼠标点击h1标签附近才能触发事件。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容