建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是卡頌。
專注于為中小企業(yè)提供成都網(wǎng)站制作、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)惠州免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。
我女友是個鐵憨憨，又菜又愛玩。
她問我：“卡卡，你說時光真的可以重來?命運真是可以選擇的么?”
我：“可以的，React18的新特性startTransition就行。”
startTransition的出現(xiàn)當然不是為了逆轉命運，而是為了逆轉React的更新流程。
"在聊startTransition的具體應用場景前，我先來聊聊React是如何揚長避短的。"
編譯時的短，運行時的長
如果我們用「重編譯時還是運行時」區(qū)分前端框架。那么Vue和Svelte就是「重編譯時」的杰出代表。
在「編譯時」，這兩個框架可以分離模版語法中「變」與「不變」的部分，減少運行時的代碼邏輯。
而React由于使用JSX(而非模版語法)描述視圖，走的是「重運行時」的路線。
- 不是React不想在「編譯時」做優(yōu)化，奈何JSX實在太靈活，做不到啊......
所以他的優(yōu)化策略也都是偏「運行時」。
在「運行時」，最大的開銷是：狀態(tài)更新到視圖變化中間的計算步驟。
這個步驟是通過「遍歷Fiber樹」實現(xiàn)的。
常規(guī)的「運行時優(yōu)化策略」，比如：
- React.memo
- PureComponent
- shouldComponentUpdate
優(yōu)化方向都是：減少遍歷時需要遍歷的Fiber節(jié)點數(shù)量。
雖說性能優(yōu)化的收益可以積少成多，但是React團隊早已不滿足這種局部的小優(yōu)化。
性能優(yōu)化新思
路他們的思路是：
不同更新觸發(fā)的視圖變化顯然是有輕重緩急的。
如果能區(qū)分更新的優(yōu)先級，讓高優(yōu)更新對應的視圖變化先渲染，那么就能在設備性能不變的情況下，讓用戶更快看到他們想看到的UI。
比如：對于這樣一個搜索下拉框：
用戶期望：輸入框輸入的內容要實時反映在視圖上(表現(xiàn)為輸入內容不能卡頓)。
而結果下拉框的展示是可以有延遲的。
基于以上邏輯，React希望提供一個API，讓用戶告訴自己，哪些更新是「高優(yōu)」的，哪些是「低優(yōu)」的。
這樣，React就能知道優(yōu)先渲染誰了。
這個API，就是startTransition。
startTransition的使用
接下來，我們用一個Demo[1]演示startTransition的使用。
這個Demo會渲染一棵「畢達哥拉斯樹」。
拖動左邊滑塊會改變樹渲染的節(jié)點數(shù)量。
拖動頂部滑塊會改變樹的傾斜角度。
最頂上有個幀雷達，可以實時顯示更新過程中的掉幀情況。
當不點擊Use startTransition按鈕，拖動頂上的滑塊。
可以看到：拖動并不流暢，頂上的幀雷達顯示掉幀(出現(xiàn)黃色、紅色扇面)
當點擊Use startTransition按鈕，拖動頂上的滑塊。
可以明顯看到：拖動變流暢，頂上的幀雷達顯示掉幀的情況變少
讓我們節(jié)選Demo的代碼看看，究竟發(fā)生了什么。
Demo都做了什么?
首先，控制滑塊、樹傾斜角度、要渲染的節(jié)點數(shù)量是分離在不同state中的：
- // 左側滑塊的state
- const [treeSizeInput, setTreeSizeInput] = useState(8);
- // 控制渲染節(jié)點數(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();
當拖動頂上的滑塊(改變樹的傾斜角度)會調用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：
- 通過調用setTreeLeanInput改變頂部滑塊位置相關的state —— treeLeanInput
- 通過調用setTreeLean改變樹的傾斜角度相關的state —— treeLean
是否點擊Use startTransition按鈕的區(qū)別，就在于setTreeLean是否會被作為startTransition的回調執(zhí)行：
- // 是否開啟startTransition
- if (enableStartTransition) {
- startTransition(() => {
- setTreeLean(value);
- });
- } else {
- setTreeLean(value);
- }
當作為startTransition的回調執(zhí)行時，setTreeLean改變的狀態(tài)(treeLean)對應的視圖變化(即：改變樹的傾斜角度)會被視為「低優(yōu)先級的更新」。
即使其與改變滑塊狀態(tài)的方法(setTreeLeanInput)在同一上下文中執(zhí)行，
由于其優(yōu)先級較低，React會優(yōu)先處理「改變滑塊狀態(tài)」對應的視圖變化。
表現(xiàn)為：滑塊的滑動不卡頓。
startTransition的原理
鐵憨憨：“這么酷炫的功能實現(xiàn)起來一定很復雜吧?”
“恰恰相反，依賴于React底層實現(xiàn)的優(yōu)先級調度模型，startTransition的實現(xiàn)其實很簡單!”
以剛才的代碼為例，如果加上console.log打?。?/p>
- 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
- }
也就是說，當調用startTransition，在其上下文中獲取到的全局變量isInTransition為true。
如果startTransition的回調函數(shù)fn中包含更新狀態(tài)的方法(比如上文Demo中的setTreeLean)，
那么這次更新就會被標記為isTransition，類似這樣：
- // 調用setTreeLean后會執(zhí)行的方法（偽代碼）
- function setState(value) {
- stateQueue.push({
- nextState: value,
- isTransition: isInTransition
- })
- }
代表這是一個低優(yōu)先級的過渡更新。
接下來，就是React內部的調度、批處理與更新流程了。
- 批處理的邏輯見給女朋友講React18新特性：Automatic batching
總結
今天，我們講了：
- React為了彌補自身弱編譯時的缺點，在運行時作出的努力
- startTransition本質是讓開發(fā)者手動標記更新的優(yōu)先級
- startTransition的實現(xiàn)原理
鐵憨憨：”原來React為了性能優(yōu)化做了這么多努力，好復雜啊，我還是用Vue吧!“
我：“可不是嘛，React已經在朝著實現(xiàn)一個瀏覽器的方向發(fā)展了?！?/p>
參考資料
[1]Demo:
https://swizec.com/blog/a-better-react-18-starttransition-demo/
分享標題：給女朋友講React18新特性：startTransition
轉載注明：http://www.5511xx.com/article/cdjgghs.html
