RxJS 响应式编程

如果你熟悉了函数式编程,请把RxJS理解为异步化的Underscore.js

RxJS是一个解决异步问题的JS开发库.它起源于 Reactive Extensions 项目，它带来了观察者模式和函数式编程的相结合的最佳实践。 观察者模式是一个被实践证明的模式，基于生产者（事件的创建者）和消费者（事件的监听者）的逻辑分离关系.

况且函数式编程方式的引入，如说明性编程，不可变数据结构，链式方法调用会使你极大的简化代码量。（和回调代码方式说再见吧）。

RxJS兼具函数式和响应式两种编程方式的特点，RxJS擅长处理异步操作，因为它对数据采用“推”的处理方式，当一个数据产生的时候，被推送给对应的处理函数，这个处理函数不用关心数据是同步产生的还是异步产生的，这样就把开发者从命令式异步处理的枷锁中解放了出来。

流的概念

观察者模式

手动订阅，手动管理声明周期，还要通过 React 中的 state 搭建一个与 render 函数 (UI) 之间的桥梁。

import React from 'react';
import { interval } from 'rxjs';
import { tap } from 'rxjs/operators';
class Timer extends React.Component {
  state = {
    val: 0,
  };
  subscription = new Subscription();
  componentDidMount() {
    const sub = interval(1000).pipe(
          tap((val) => this.setState({ val }))
        )
    // 添加订阅
    this.subscription.add(sub)
  }
  componentWillUnmount() {
    // 删除订阅
    this.subscription.unsubscribe()
  }
  render() {
    return <h1>{this.state.val}</h1>
  }
}

Leetcode方案 rxjs + rxjs-hooks

import React from 'react';
import { interval } from 'rxjs';
import { useObservable } from 'rxjs-hooks';
function Timer() {
  const val = useObservable(() => interval(1000), 0);
  return <h1>{val}</h1>
}

https://github.com/LeetCode-OpenSource/rxjs-hooks

参考

https://reactjs.org/docs/hooks-intro.html
https://jerryzou.com/posts/rxjs-hooks/
https://github.com/LeetCode-OpenSource/rxjs-hooks