小推理：React18比老版React更優秀的一個地方
大家好，我卡頌。
React18已經進入RC(release candidate)階段，距離正式版只有一步之遙了。
v18新增了很多特性，今天，我們不聊新特性，而是來講講v18相比老版更優秀的一個細節：
- v18中，組件render的次數可能更少。
狀態從何而來
在如下組件中：
function App() {
const [num, update] = useState(0);
// ...省略
App組件render后會執行useState，返回num的最新值。
也就是說，組件必須render，才能知道最新的狀態。為什么會這樣呢?
考慮如下觸發更新的代碼：
const [num, update] = useState(0);
const onClick = () => {
update(100);
update(num + 1);
update(num => num * 3);
}
onClick執行后觸發更新，更新導致App組件render，進而useState執行。
在useState內部，會遵循如下流程計算num：
- update(100)將num變為100。
- update(num + 1)將num變為100 + 1 = 101。
- update(num => num * 3)將num變為101 * 3 = 303。
即，App組件render時，num為303。
所以，狀態的計算需要先收集觸發的更新，再在useState中統一計算。
對于上述例子，將更新分別命名為u0～u2，則狀態的計算公式為：
baseState -> u0 -> u1 -> u2 = newState
Concurrent帶來的變化
Concurrent(并發)為React帶來了「優先級」的概念，反映到「狀態計算」上，根據觸發更新的場景，更新擁有不同優先級(比如onClick回調中觸發的更新優先級高于useEffect回調中觸發的更新)。
表現在計算狀態中的區別就是，如果某個更新優先級低，則會被跳過。
假設上述例子中u1優先級低，那么App組件render時，計算num狀態的公式為：
// 其中u1因為優先級低，被跳過
baseState -> u0 -> u2 = newState
即：
- update(100)將num變為100。
- update(num => num * 3)將num變為100 * 3 = 300。
顯然這個結果是不對的。
所以，并發情況下React計算狀態的邏輯會更復雜。具體來講，可能包含多輪計算。
當計算狀態時，如果某次更新被跳過，則下次計算時會從被跳過的更新繼續往后計算。
比如上例中，u1被跳過。當u1被跳過時，num為100。此時的狀態100，以及u1和「他后面的所有更新」都會保存下來，參與下次計算。
在例子中即為u1、u2保存下來。
下次更新的情況如下：
- 初始狀態為100，update(num + 1)將num變為100 + 1 = 101。
- update(num => num * 3)將num變為101 * 3 = 303。
可見，最終的結果303與「同步的React」是一致的，只是需要render兩次。
「同步的React」 render一次，結果為303。
「并發的React」 render兩次，結果分別為300(中間狀態)，303(最終狀態)。
新舊Concurrent的區別
從上例我們發現，組件render的次數受「有多少更新被跳過」影響，實際可能不止render兩次，而是多次。
在老版「并發的React」中，表示「優先級」的是一個被稱為expirationTime的時間戳。比較「更新是否應該被跳過」的算法如下：
// 更新優先級是否小于render的優先級
if (updateExpirationTime < renderExpirationTime) {
// ...被跳過
} else {
// ...不跳過
}
在這種邏輯下，只要優先級低，就會被跳過，就意味著多一次render。
在新版「并發的React」中，「優先級」被保存在「31位的二進制數」中。
舉個例子：
const renderLanes = 0b0101;
u1.lane = 0b0001;
u2.lane = 0b0010;
其中renderLanes是本次更新指定的「優先級」。
比較「優先級」的函數為：
function isSubsetOfLanes(set, subset) {
return (set & subset) === subset;
}
其中：
// true
isSubsetOfLanes(renderLanes, u1.lane)
// false
isSubsetOfLanes(renderLanes, u2.lane)
u1.lane包含于renderLanes中，代表這個更新擁有足夠優先級。
u2.lane不包含于renderLanes中，代表這個更新沒有足夠優先級，被跳過。
但是「被跳過的更新」(例子中的u2)的lane會被重置為0，即：
u2.lane = 0b0000;
顯然任何lanes都是包含0的：
// true
isSubsetOfLanes(renderLanes, 0)
所以這個更新一定會在下次處理。換言之，在新版「并發的React」中，由于「優先級原因被跳過」，導致的「重復render」，最多只會有2次。
總結
相比于老版「并發的React」，新版「并發的React」在render次數上會更有優勢。
反映到用戶的感官上，用戶會更少看到「未計算完全的中間狀態」。
