大家好,我卡颂。
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 => num + 1);
update(num => num * 3);
}
onClick
执行后触发更新,更新导致App
组件render
,进而useState
执行。
在useState
内部,会遵循如下流程计算num
:
update(100)
将num
变为100
update(num => 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 => 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
次数上会更有优势。
反映到用户的感官上,用户会更少看到未计算完全的中间状态。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。