Suspense對(duì)React的意義及作用解析

更新時(shí)間：2023年06月15日 14:45:28 作者：卡頌

這篇文章主要為大家介紹了Suspense對(duì)React的意義及作用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

可能很多朋友在項(xiàng)目中還沒(méi)用過(guò)Suspense，但是Suspense是React未來(lái)發(fā)展非常重要的一環(huán)。

本文會(huì)講解Suspense對(duì)于React的意義。

React的迭代過(guò)程

React從v16到v18主打的特性經(jīng)歷了三次大的變化：

v16：Async Mode（異步模式）
v17：Concurrent Mode（并發(fā)模式）
v18：Concurrent Render（并發(fā)更新）

要了解這三次變化的意義，需要先了解React中一個(gè)很容易混淆的概念 —— render（渲染）。

ClassComponent的render函數(shù)執(zhí)行時(shí)被稱為render：

class App extends Component {
  render() {
    // ...這是render函數(shù)
  }
}

而將render的結(jié)果渲染到頁(yè)面的過(guò)程，被稱為commit。

Async Mode的目的是為了讓render變?yōu)楫惒?、可中斷的?/p>

Concurrent Mode的目的是讓commit在用戶的感知上是并發(fā)的。

由于Concurrent Mode包含breaking change，所以v18提出了Concurrent Render，減少開發(fā)者遷移的成本。

那么讓commit在用戶的感知上是并發(fā)的是什么意思呢？

“并發(fā)”的意義

說(shuō)到并發(fā)，就不得不提Suspense。考慮如下代碼：

const App = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
  }, []);
  return (
    <>
      <Suspense fallback={<div>loading...</div>}>
        <Sub count={count} />
      </Suspense>
      <div>count is {count}</div>
    </>
  );
};

其中：

每過(guò)一秒會(huì)觸發(fā)一次更新，將狀態(tài)count更新為count => count + 1
在Sub中會(huì)發(fā)起異步請(qǐng)求，請(qǐng)求返回前，包裹Sub的Suspense會(huì)渲染fallback

假設(shè)請(qǐng)求三秒后返回，理想情況下，請(qǐng)求發(fā)起前后頁(yè)面會(huì)依次顯示為：

// Sub內(nèi)請(qǐng)求發(fā)起前
<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>
// Sub內(nèi)請(qǐng)求發(fā)起第1秒
<div>loading...</div>
<div>count is 1</div>
// Sub內(nèi)請(qǐng)求發(fā)起第2秒
<div>loading...</div>
<div>count is 2</div>
// Sub內(nèi)請(qǐng)求發(fā)起第3秒
<div>loading...</div>
<div>count is 3</div>
// Sub內(nèi)請(qǐng)求成功后
<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>

從用戶的視角觀察，頁(yè)面中有兩個(gè)任務(wù)在并發(fā)執(zhí)行：

請(qǐng)求Sub的任務(wù)（觀察第一個(gè)div的變化）
改變count的任務(wù)（觀察第二個(gè)div的變化）

Suspense帶來(lái)的頁(yè)面中多任務(wù)并發(fā)執(zhí)行感覺(jué)，就是Concurrent（并發(fā)）在React中的含義。

其實(shí)在Async Mode時(shí)，已經(jīng)支持Suspense。但是上面的代碼在Async Mode的頁(yè)面中表現(xiàn)如下：

// Sub內(nèi)請(qǐng)求發(fā)起前
<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>
// Sub內(nèi)請(qǐng)求發(fā)起第1秒
<div>loading...</div>
<div>count is 0</div>
// Sub內(nèi)請(qǐng)求發(fā)起第2秒
<div>loading...</div>
<div>count is 0</div>
// Sub內(nèi)請(qǐng)求發(fā)起第3秒
<div>loading...</div>
<div>count is 0</div>
// Sub內(nèi)請(qǐng)求成功后
<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>

從用戶的視角觀察，當(dāng)請(qǐng)求Sub的任務(wù)執(zhí)行時(shí)，改變count的任務(wù)就被凍結(jié)了。

這就是為什么被稱為Async（異步）而不是Concurrent（并發(fā)）。