suspense：异步渲染的另外一环

唔，你们好，我是 132，今天给你们带来 suspense 的一些内容

前两天的 react conf 2019 结束了，你们忽然发现今年很平庸，没有什么有意思的东西了

但其实也不算，react 最近动做仍是不少的，只是都是偏向业务的组件和 API

好比官方发布了一组新的 suspense API，包括 Suspense、 SuspenseList 、useDeferredValue、 useTransition

我我的对 API 层面的东西其实不太感兴趣，可是咱们能够结合这些 API 来搞清楚 suspense

suspense 其实很简单，它经过在组件中抛出 promise，而后 react 内部遍历时捕捉到

而后打断遍历，等 resolve 后再继续进行工做

不少人使用 suspense 的时候，并感觉不出它和普通的 loading 组件有什么区别

咱们已经知道，react 的调度器会在浏览器重绘时被打断，浏览器行为也就是高优先级任务

可是……正常人感觉不出来啊，它哪里牛逼了？

因此 react 又不断的造新的 API，为了像你们展现 concurrent mode 的厉害之处

suspense 是第一个 API，它是在 promise 被抛出时打断工做

useTransition 是第二个 API，它会在调用 startTransition 的时候打断工做，可是它会记住状态，它的目的是打破 suspense 的回调

useDeferredValue 是第三个 API，它会延迟响应，它的目的是为了下降浏览器的优先级，好比表单响应时候，咱们并非必定须要时刻响应，咱们有时候能够手动去下降响应，延迟它

综上所述，如今 react 的调度器能够说是能够打断，也能够阻止打断了

固然这还差得远，将来确定有愈来愈多的 API 和组件，这才是调度的意义

今后，react like 框架要凉凉了

Fre 的 suspense

fre 一样拥有调度，因此理论上能够对等实现这些 API 和 组件

可是 fre 也有它本身的追求，我不会跟随 react 实现一堆面相业务的东西

可是我也会和 react 同样，在 fre 内部捕获 promise，进而去打断工做

codesandbox.io/s/fre-suspe…

demo 在这里，我经过在外部将 promise 抛错，实现了 use-suspense 钩子

它的工做原理和 react 是同样的，区别在于我不提供内置组件

同理，借助这个特性，用户也能够根据本身的业务封装出不一样的组件和钩子

总结 suspense 是一种将 promise 挂起，而后交给框架处理的一种新形式，它能够将 promise 参与到框架的遍历中来

有打断就有阻止打断，调度就是想咋地咋地，useDeferredValue 和 useTransition 就是反着来的 API

fre 是一个底层库，我不会轻易给出业务组件，可是鼓励用户本身实现 最后放一下 fre 的 github 地址：

github.com/132yse/fre

欢迎一块儿来搞，咱们按需跟随 react 哈！