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