給女朋友講React18新特性：startTransition

作者：卡頌 2021-06-22 07:45:57

startTransition的出現(xiàn)當(dāng)然不是為了逆轉(zhuǎn)命運(yùn)，而是為了逆轉(zhuǎn)React的更新流程。在聊startTransition的具體應(yīng)用場景前，我先來聊聊React是如何揚(yáng)長避短的。

[[406706]]

大家好，我是卡頌。

我女友是個鐵憨憨，又菜又愛玩。

她問我：“卡卡，你說時光真的可以重來?命運(yùn)真是可以選擇的么?”

我：“可以的，React18的新特性startTransition就行。”

startTransition的出現(xiàn)當(dāng)然不是為了逆轉(zhuǎn)命運(yùn)，而是為了逆轉(zhuǎn)React的更新流程。

"在聊startTransition的具體應(yīng)用場景前，我先來聊聊React是如何揚(yáng)長避短的。"

編譯時的短，運(yùn)行時的長

如果我們用「重編譯時還是運(yùn)行時」區(qū)分前端框架。那么Vue和Svelte就是「重編譯時」的杰出代表。

在「編譯時」，這兩個框架可以分離模版語法中「變」與「不變」的部分，減少運(yùn)行時的代碼邏輯。

而React由于使用JSX(而非模版語法)描述視圖，走的是「重運(yùn)行時」的路線。

不是React不想在「編譯時」做優(yōu)化，奈何JSX實在太靈活，做不到啊......

所以他的優(yōu)化策略也都是偏「運(yùn)行時」。

在「運(yùn)行時」，最大的開銷是：狀態(tài)更新到視圖變化中間的計算步驟。

這個步驟是通過「遍歷Fiber樹」實現(xiàn)的。

常規(guī)的「運(yùn)行時優(yōu)化策略」，比如：

React.memo
PureComponent
shouldComponentUpdate

優(yōu)化方向都是：減少遍歷時需要遍歷的Fiber節(jié)點(diǎn)數(shù)量。

雖說性能優(yōu)化的收益可以積少成多，但是React團(tuán)隊早已不滿足這種局部的小優(yōu)化。

性能優(yōu)化新思

路他們的思路是：

不同更新觸發(fā)的視圖變化顯然是有輕重緩急的。

如果能區(qū)分更新的優(yōu)先級，讓高優(yōu)更新對應(yīng)的視圖變化先渲染，那么就能在設(shè)備性能不變的情況下，讓用戶更快看到他們想看到的UI。

比如：對于這樣一個搜索下拉框：

用戶期望：輸入框輸入的內(nèi)容要實時反映在視圖上(表現(xiàn)為輸入內(nèi)容不能卡頓)。

而結(jié)果下拉框的展示是可以有延遲的。

基于以上邏輯，React希望提供一個API，讓用戶告訴自己，哪些更新是「高優(yōu)」的，哪些是「低優(yōu)」的。

這樣，React就能知道優(yōu)先渲染誰了。

這個API，就是startTransition。

startTransition的使用

接下來，我們用一個Demo[1]演示startTransition的使用。

這個Demo會渲染一棵「畢達(dá)哥拉斯樹」。

拖動左邊滑塊會改變樹渲染的節(jié)點(diǎn)數(shù)量。

拖動頂部滑塊會改變樹的傾斜角度。

最頂上有個幀雷達(dá)，可以實時顯示更新過程中的掉幀情況。

當(dāng)不點(diǎn)擊Use startTransition按鈕，拖動頂上的滑塊。

可以看到：拖動并不流暢，頂上的幀雷達(dá)顯示掉幀(出現(xiàn)黃色、紅色扇面)

當(dāng)點(diǎn)擊Use startTransition按鈕，拖動頂上的滑塊。

可以明顯看到：拖動變流暢，頂上的幀雷達(dá)顯示掉幀的情況變少

讓我們節(jié)選Demo的代碼看看，究竟發(fā)生了什么。

Demo都做了什么?

首先，控制滑塊、樹傾斜角度、要渲染的節(jié)點(diǎn)數(shù)量是分離在不同state中的：

// 左側(cè)滑塊的state 
const [treeSizeInput, setTreeSizeInput] = useState(8); 
// 控制渲染節(jié)點(diǎn)數(shù)量的state 
const [treeSize, setTreeSize] = useState(8); 
 
// 頂部滑塊的state 
const [treeLeanInput, setTreeLeanInput] = useState(0); 
// 控制樹傾斜角度的state 
const [treeLean, setTreeLean] = useState(0); 
 
// startTransition的hook版本 
const [isLeaning, startTransition] = useTransition();

當(dāng)拖動頂上的滑塊(改變樹的傾斜角度)會調(diào)用changeTreeLean方法：

function changeTreeLean(event) { 
    const value = Number(event.target.value); 
    setTreeLeanInput(value); // update input 
 
    // update visuals 
    if (enableStartTransition) { 
        startTransition(() => { 
            setTreeLean(value); 
        }); 
    } else { 
        setTreeLean(value); 
    } 
}

該方法會改變兩個state：

通過調(diào)用setTreeLeanInput改變頂部滑塊位置相關(guān)的state —— treeLeanInput
通過調(diào)用setTreeLean改變樹的傾斜角度相關(guān)的state —— treeLean

是否點(diǎn)擊Use startTransition按鈕的區(qū)別，就在于setTreeLean是否會被作為startTransition的回調(diào)執(zhí)行：

// 是否開啟startTransition 
if (enableStartTransition) { 
  startTransition(() => { 
    setTreeLean(value); 
  }); 
} else { 
  setTreeLean(value); 
}

當(dāng)作為startTransition的回調(diào)執(zhí)行時，setTreeLean改變的狀態(tài)(treeLean)對應(yīng)的視圖變化(即：改變樹的傾斜角度)會被視為「低優(yōu)先級的更新」。

即使其與改變滑塊狀態(tài)的方法(setTreeLeanInput)在同一上下文中執(zhí)行，

由于其優(yōu)先級較低，React會優(yōu)先處理「改變滑塊狀態(tài)」對應(yīng)的視圖變化。

表現(xiàn)為：滑塊的滑動不卡頓。

startTransition的原理

鐵憨憨：“這么酷炫的功能實現(xiàn)起來一定很復(fù)雜吧?”

“恰恰相反，依賴于React底層實現(xiàn)的優(yōu)先級調(diào)度模型，startTransition的實現(xiàn)其實很簡單!”

以剛才的代碼為例，如果加上console.log打印：

console.log(1); 
startTransition(() => { 
  console.log(2); 
  setTreeLean(value); 
}); 
console.log(3);

那么會依次輸出：123

startTransition做的事情很簡單，類似這樣：

let isInTransition = false 
 
function startTransition(fn) { 
  isInTransition = true 
  fn() 
  isInTransition = false 
}

也就是說，當(dāng)調(diào)用startTransition，在其上下文中獲取到的全局變量isInTransition為true。

如果startTransition的回調(diào)函數(shù)fn中包含更新狀態(tài)的方法(比如上文Demo中的setTreeLean)，

那么這次更新就會被標(biāo)記為isTransition，類似這樣：

// 調(diào)用setTreeLean后會執(zhí)行的方法（偽代碼） 
function setState(value) { 
  stateQueue.push({ 
    nextState: value, 
    isTransition: isInTransition 
  }) 
}

代表這是一個低優(yōu)先級的過渡更新。

接下來，就是React內(nèi)部的調(diào)度、批處理與更新流程了。