大家好，我卡頌。

可能很多朋友在項目中還沒用過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 (
    <>
      <Suspense fallback={<div>loading...</div>}>
        <Sub count={count} />
      </Suspense>
      <div>count is {count}</div>
    </>
  );
};

其中：

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

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

// Sub內請求發起前
<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>

// Sub內請求發起第1秒
<div>loading...</div>
<div>count is 1</div>

// Sub內請求發起第2秒
<div>loading...</div>
<div>count is 2</div>

// Sub內請求發起第3秒
<div>loading...</div>
<div>count is 3</div>

// Sub內請求成功后
<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>

從用戶的視角觀察，頁面中有兩個任務在「并發」執行：

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

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

其實在Async Mode時，已經支持Suspense。但是上面的代碼在Async Mode的頁面中表現如下：

// Sub內請求發起前
<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>

// Sub內請求發起第1秒
<div>loading...</div>
<div>count is 0</div>

// Sub內請求發起第2秒
<div>loading...</div>
<div>count is 0</div>

// Sub內請求發起第3秒
<div>loading...</div>
<div>count is 0</div>

// Sub內請求成功后
<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>

從用戶的視角觀察，當「請求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重度依賴運行時，為了優化性能，「并發」是這套架構下的最優發展方向。