suspense:异步渲染的另一环

724 阅读2分钟

唔,大家好,我是 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 哈!