大家好，我卡頌。

可能很多朋友在項目中還沒用過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í)行：

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

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

其實在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ā))。

Suspense的意義

可以看到，對于Concurrent，Suspense是必不可少的一環(huán)。

可以認為，Suspense的作用是「劃分頁面中需要并發(fā)渲染的部分」。

比如上例中，通過Suspense將「請求Sub的任務(wù)」與「改變count的任務(wù)」劃分開，從視覺上并發(fā)執(zhí)行。

當(dāng)明確了Suspense的意義后，你會發(fā)現(xiàn)，React接下來在做的事，就是不斷擴充Suspense的場景(也就是說將更多場景納入并發(fā)渲染的范疇)。

比如，當(dāng)前已有的：

• React.lazy
• 通過React提供的fetch庫改造后的異步請求
• useTransition
• useDeferredvalue

未來會加入的：

• Server Component
• Selective Hydration

總結(jié)

React的發(fā)展歷程是：從「同步」到「異步」，再到「并發(fā)」。

當(dāng)實現(xiàn)「并發(fā)」后，接下來的發(fā)展方向?qū)⑹牵翰粩鄶U展可以使用「并發(fā)」的場景。

Suspense的作用是「劃分頁面中需要并發(fā)渲染的部分」。

這套發(fā)展路徑從React誕生伊始就決定了，因為從架構(gòu)上來說，React重度依賴運行時，為了優(yōu)化性能，「并發(fā)」是這套架構(gòu)下的最優(yōu)發(fā)展方向。