建站
咨詢
售后
建站咨詢
新聞中心
可能很多朋友在項目中還沒用過Suspense，但是Suspense是React未來發(fā)展非常重要的一環(huán)。
為臺安等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及臺安網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為網(wǎng)站制作、成都網(wǎng)站建設、臺安網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
本文會講解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的結果渲染到頁面的過程，被稱為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 (
<>
loading... );
};
其中：
- 每過一秒會觸發(fā)一次更新，將狀態(tài)count更新為count => count + 1
- 在Sub中會發(fā)起異步請求，請求返回前，包裹Sub的Suspense會渲染fallback
假設請求三秒后返回，理想情況下，請求發(fā)起前后頁面會依次顯示為：
// Sub內請求發(fā)起前I am sub, count is 0count is 0
// Sub內請求發(fā)起第1秒loading...count is 1
// Sub內請求發(fā)起第2秒loading...count is 2
// Sub內請求發(fā)起第3秒loading...count is 3
// Sub內請求成功后I am sub, request success, count is 4count is 4
從用戶的視角觀察，頁面中有兩個任務在「并發(fā)」執(zhí)行：
- 請求Sub的任務(觀察第一個div的變化)
- 改變count的任務(觀察第二個div的變化)
Suspense帶來的「頁面中多任務并發(fā)執(zhí)行」感覺，就是Concurrent(并發(fā))在React中的含義。
其實在Async Mode時，已經(jīng)支持Suspense。但是上面的代碼在Async Mode的頁面中表現(xiàn)如下：
// Sub內請求發(fā)起前I am sub, count is 0count is 0
// Sub內請求發(fā)起第1秒loading...count is 0
// Sub內請求發(fā)起第2秒loading...count is 0
// Sub內請求發(fā)起第3秒loading...count is 0
// Sub內請求成功后I am sub, request success, count is 4count is 4
從用戶的視角觀察，當「請求Sub的任務」執(zhí)行時，「改變count的任務」就被凍結了。
這就是為什么被稱為Async(異步)而不是Concurrent(并發(fā))。
Suspense的意義
可以看到，對于Concurrent，Suspense是必不可少的一環(huán)。
可以認為，Suspense的作用是「劃分頁面中需要并發(fā)渲染的部分」。
比如上例中，通過Suspense將「請求Sub的任務」與「改變count的任務」劃分開，從視覺上并發(fā)執(zhí)行。
當明確了Suspense的意義后，你會發(fā)現(xiàn)，React接下來在做的事，就是不斷擴充Suspense的場景(也就是說將更多場景納入并發(fā)渲染的范疇)。
比如，當前已有的：
- React.lazy
- 通過React提供的fetch庫改造后的異步請求
- useTransition
- useDeferredvalue
未來會加入的：
- Server Component
- Selective Hydration
總結
React的發(fā)展歷程是：從「同步」到「異步」，再到「并發(fā)」。
當實現(xiàn)「并發(fā)」后，接下來的發(fā)展方向將是：不斷擴展可以使用「并發(fā)」的場景。
Suspense的作用是「劃分頁面中需要并發(fā)渲染的部分」。
這套發(fā)展路徑從React誕生伊始就決定了，因為從架構上來說，React重度依賴運行時，為了優(yōu)化性能，「并發(fā)」是這套架構下的最優(yōu)發(fā)展方向。
本文標題：Suspense對React的意義在哪里？
文章轉載：http://www.5511xx.com/article/dhdpcij.html
