2018-08-02

FE

8 minutes read (About 1260 words)

Rxjs Scheduler 下的 eventloop

本文将简单介绍 event loop 在 RxJS 中运用. 偏重于 RxJS Scheduler 而不是 event loop

event loop

event loop 是一种任务调度机制, 用来处理异步任务, 在 JavaScript 单线程语言中, 在同一时间内只能只能处理一件事, 当我们遇到需要处理异步的情况, 不能让异步操作阻塞线程, 我们可以让异步任务先搁置, 先执行同步任务, 等异步时间来临再来执行异步任务, 这就是 event loop.

JavaScript 在执行过程中, 变量与对象会存入对中, 另外还会维护一个任务队列(包括宏任务队列, 微任务队列), 执行函数会被推入栈中, 一旦函数执行完毕就会从函数中推出, 一旦整个执行栈被清空, 就开始处理任务队列, 按照一定逻辑将任务推入执行栈中执行, 执行过程中可能会往任务队列中添加其他任务,微任务具有高优先级, 在单个宏任务的切换中间会检查执行整个微任务队列, 再去执行下一个宏任务

2018-07-18

FE

4 minutes read (About 634 words)

使用装饰器自动取消订阅 React 组件中的 RxJS 流

最近自己的一个项目使用了 RxJS 进行状态管理, 需要在组件中订阅流来获取全局状态，但是在组件卸载的时候需要手动取消订阅流.
这样写起来有点繁琐，所以考虑用装饰器简化下代码

import * as React from "react";
import { Subscription } from "rxjs";
import { action$, state$ } from "../store/store";

class Artist extends React.Component {
  sub: Subscription;
  handleClick() {
    setInterval(() => {
      action$.next((state: any) => state);
    }, 1000);
  }
  componentDidMount() {
    this.sub = state$.subscribe(v => {
      console.log("artist", v);
    });
  }
  componentWillUnmount() {
    console.log("artist unsubscribe");
    this.sub.unsubscribe();
  }
  render() {
    return (
      <div>
        <button onClick={() => this.handleClick()}>Click Me</button>
      </div>
    );
  }
}

export default Artist;

2018-06-20

FE

4 minutes read (About 576 words)

RxJS Subject 学习

Subject

其实一个 Observable 可以被订阅多次, 但是并不共享一个流的数据,如下例

let stream$ = Rx.of(1, 2, 3);
stream$.subscribe(r => console.log("a", r));

setTimeout(() => {
  stream$.subscribe(r => console.log("b", r));
}, 110);

输出结果

a 1
a 2
a 3
b 1
b 2
b 3

2018-06-16

FE

4 minutes read (About 582 words)

RxJS 操作符笔记

RxJS 6

操作符

一些常用的操作符

of
from
first
last
tap
interval
timer
forkJoin
filter
map
switchMap
scan
takeWhile
takeUtil
take
concat
throttle
debounce
merge

of

将数字转化为 Observable

1 2	Rx.of("1", "2").subscribe(v => console.log(v)); // 输出 1, 2

Rxjs Scheduler 下的 eventloop

event loop

使用装饰器自动取消订阅 React 组件中的 RxJS 流

RxJS Subject 学习

Subject

RxJS 操作符笔记

操作符

of

Categories

Archives

Recent

Tags

Recent

Tags

Your browser is out-of-date!