Suspense 對 React 的意義在哪裏？

作者：卡頌

簡介：《React 技術揭祕》作者

來源：SegmentFault 思否社區

大家好，我卡頌。

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

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

請求 Sub 的任務（觀察第一個 div 的變化）
改變 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 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>

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/HPWtgAXeCLwd3zDlAg0hMw

React 的迭代過程

“併發” 的意義

Suspense 的意義

總結

猜你喜歡