Suspense對React的意義及作用解析

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

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

引言

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

本文會講解Suspense對于React的意義。

React的迭代過程

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

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

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

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

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

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

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

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

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

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

“并發(fā)”的意義

說到并發(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>
    </>
  );
};

其中：

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

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

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

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

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

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

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

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

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

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