Skip to content

Instantly share code, notes, and snippets.

@msyfls123
Last active July 9, 2019 03:01
Show Gist options
  • Save msyfls123/2ba58dd6820aad5cecdcf8cccfb215f1 to your computer and use it in GitHub Desktop.
Save msyfls123/2ba58dd6820aad5cecdcf8cccfb215f1 to your computer and use it in GitHub Desktop.
Asynchrony: Under the Hood - Shelley Vohr - JSConf EU 2018
event loop
micro task / macro task (setTimeout Promise nextTick)
本质:callback,单一事件
Promise -> generator -> async/await
Reactive
响应的、离散的、惰性的、纯函数的
Observable subscribe
next complete error / unsubscribe
of from timer interval / merge map filter / !catchError!retryWhen! / broadcast publish share / scheduler(js micro task)
Promise.race race/switch
Promise.all forkJoin
React
异曲同工,但 props + state 的问题是很难把控组件生命周期与状态的关系
redux-observable
epic (action$, state$) => newAction$
eg. 公司项目应用示例 多重请求的发送与管理/GraphQL
rxjs-hooks
hooks 的写法,内部是一个 epic,容易被复用,但组合概念较难理清
Cycle.js
全是 stream
input$ -> state$
优点:可以方便地用 rxjs 的各种运算符合并不同的流(DOM 事件/HTTP 请求)
缺点:初始值的设置与流的纯洁性
eg. 电梯/汽车自动车窗升降/复杂数据的加载与缓存
调整议题顺序,引人入胜,层层深入
枯燥概念生动地导入,rxjs 运算符在实际 demo 的应用
提前准备 demo,尽量没有网络环境依赖,提前录制好视频
7 月初,slides 的梗概
demo 引入, 介绍 promise 的痛点,最后能用 rxjs 来解决
cycle 解决了 react 的痛点吗?
https://stackblitz.com/edit/automatic-car-window?file=index.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment