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 哈！