Suspense對React的意義在哪裡?

Suspense對React的意義在哪裡?

可能很多朋友在專案中還沒用過

Suspense

,但是

Suspense

React

未來發展非常重要的一環。

本文會講解

Suspense

對於

React

的意義。

React的迭代過程

React

從v16到v18主打的特性經歷了三次大的變化:

v16:Async Mode(非同步模式)

v17:Concurrent Mode(併發模式)

v18:Concurrent Render(併發更新)

要了解這三次變化的意義,需要先了解

React

中一個很容易混淆的概念 ——

render

(渲染)。

ClassComponent

render

函式執行時被稱為

render

class App extends Component { render() { // 。。。這是render函式 }}

而將

render

的結果渲染到頁面的過程,被稱為

commit

Async Mode

的目的是為了讓

render

變為非同步、可中斷的。

Concurrent Mode

的目的是讓

commit

在使用者的感知上是併發的。

由於

Concurrent Mode

包含

breaking change

,所以

v18

提出了

Concurrent Render

,減少開發者遷移的成本。

那麼

讓commit在使用者的感知上是併發的

是什麼意思呢?

“併發”的意義

說到

併發

,就不得不提

Suspense

。考慮如下程式碼:

const App = () => { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { setCount(count => count + 1); }, 1000); }, []); return ( <> loading。。。

}>
count is {count}
);};

其中:

每過一秒會觸發一次更新,將狀態

count

更新為

count => count + 1

Sub

中會發起非同步請求,請求返回前,包裹

Sub

Suspense

會渲染

fallback

假設請求三秒後返回,理想情況下,請求發起前後頁面會依次顯示為:

// Sub內請求發起前

I am sub, count is 0
count is 0
// Sub內請求發起第1秒
loading。。。
count is 1
// Sub內請求發起第2秒
loading。。。
count is 2
// Sub內請求發起第3秒
loading。。。
count is 3
// Sub內請求成功後
I am sub, request success, count is 4
count is 4

從使用者的視角觀察,頁面中有兩個任務在

併發

執行:

請求

Sub

的任務(觀察第一個

div

的變化)

改變

count

的任務(觀察第二個

div

的變化)

Suspense

帶來的

頁面中多工併發執行

感覺,就是

Concurrent

(併發)在

React

中的含義。

其實在

Async Mode

時,已經支援

Suspense

。但是上面的程式碼在

Async Mode

的頁面中表現如下:

// Sub內請求發起前

I am sub, count is 0
count is 0
// Sub內請求發起第1秒
loading。。。
count is 0
// Sub內請求發起第2秒
loading。。。
count is 0
// Sub內請求發起第3秒
loading。。。
count is 0
// Sub內請求成功後
I am sub, request success, count is 4
count is 4

從使用者的視角觀察,當

請求Sub的任務

執行時,

改變count的任務

就被凍結了。

這就是為什麼被稱為

Async

(非同步)而不是

Concurrent

(併發)。

Suspense的意義

可以看到,對於

Concurrent

Suspense

是必不可少的一環。

可以認為,

Suspense

的作用是

劃分頁面中需要併發渲染的部分

比如上例中,透過

Suspense

請求Sub的任務

改變count的任務

劃分開,從視覺上併發執行。

當明確了

Suspense

的意義後,你會發現,

React

接下來在做的事,就是不斷擴充

Suspense

的場景(也就是說將更多場景納入併發渲染的範疇)。

比如,當前已有的:

React。lazy

透過

React

提供的

fetch

庫改造後的非同步請求

useTransition

useDeferredvalue

未來會加入的:

Server Component

Selective Hydration

總結

React

的發展歷程是:從

同步

非同步

,再到

併發

當實現

併發

後,接下來的發展方向將是:不斷擴充套件可以使用

併發

的場景。

Suspense

的作用是

劃分頁面中需要併發渲染的部分

這套發展路徑從

React

誕生伊始就決定了,因為從架構上來說,

React

重度依賴執行時,為了最佳化效能,

併發

是這套架構下的最優發展方向。

轉自:https://juejin。cn/post/7062188906464149518