快捷導(dǎo)航

React18新特性startTransition詳解

更新時(shí)間：2024年09月19日 14:11:29 作者：田本初

React18的新特性startTransition主要是為了優(yōu)化用戶體驗(yàn),通過標(biāo)記低優(yōu)先級的更新任務(wù),如頁面重渲染,使它們不會阻塞高優(yōu)先級的緊急任務(wù)如用戶輸入響應(yīng),本文介紹React18新特性startTransition,感興趣的朋友跟隨小編一起看看吧

前言

React 18 引入了 startTransition，這是 Concurrent Mode「并發(fā)特性」中的一部分，主要用于標(biāo)記那些不需要立即響應(yīng)的 低優(yōu)先級 更新，為它們分配不同的優(yōu)先級，低優(yōu)先級任務(wù)會延遲處理，從而保持界面交互的流暢性。

作用

startTransition 會標(biāo)記某些更新為非緊急的。React 會為這些標(biāo)記的任務(wù)分配較低的優(yōu)先級，保證用戶界面的緊急更新（如輸入框的輸入響應(yīng)）不會因?yàn)槠渌^大開銷的更新而被阻塞，從而提升用戶體驗(yàn)。

緊急任務(wù)：用戶的輸入、點(diǎn)擊、表單操作等需要立即響應(yīng)的操作。
非緊急任務(wù)：狀態(tài)的更新、頁面的重新渲染等不需要立即更新完成的任務(wù)，例如列表的過濾、分頁的切換等。

使用

useTransition 返回 isPending 和 startTransition 函數(shù)：

isPending：表示低優(yōu)先級任務(wù)是否正在處理，通?？梢杂脕盹@示一個(gè)加載指示器。
startTransition：用于標(biāo)記低優(yōu)先級的更新。

const [isPending, startTransition] = useTransition();
startTransition(() => {
  // 此處的更新會被標(biāo)記為低優(yōu)先級
  setState(newValue);
});

工作原理

1. Lanes

通過 Lanes 機(jī)制實(shí)現(xiàn)優(yōu)先級調(diào)度（每個(gè)更新任務(wù)都會被分配到不同的 Lane 中，根據(jù)其優(yōu)先級進(jìn)行調(diào)度）。

使用 startTransition 時(shí)，React 會將這個(gè)任務(wù)分配到一個(gè)較低優(yōu)先級的 Lane 中，這樣它不會阻塞高優(yōu)先級的任務(wù)（如用戶的交互）。
如果高優(yōu)先級任務(wù)出現(xiàn)（例如用戶在表單中輸入新的內(nèi)容），React 可以暫停低優(yōu)先級任務(wù)，先處理緊急任務(wù)，再在空閑時(shí)恢復(fù)低優(yōu)先級任務(wù)。

2. Fiber Reconciler

通過 Fiber Reconciler 處理更新任務(wù)。當(dāng) startTransition 標(biāo)記某個(gè)任務(wù)為低優(yōu)先級后，F(xiàn)iber 機(jī)制會按照優(yōu)先級調(diào)度任務(wù)并中斷長時(shí)間的渲染過程，確保界面的交互性不會受到影響。