小推理:React18 比老版 React 更优秀的一个地方
作者:卡颂
简历:《React技术揭秘》作者
来源:SegmentFault 思否社区
大家好,我卡颂。
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
baseState -> u0 -> u1 -> u2 = newState
Concurrent带来的变化
// 其中u1因为优先级低,被跳过
baseState -> u0 -> u2 = newState
update(100)将num变为100 update(num => num * 3)将num变为100 * 3 = 300
初始状态为100,update(num => num + 1)将num变为100 + 1 = 101
update(num => num * 3)将num变为101 * 3 = 303
新旧Concurrent的区别
// 更新优先级是否小于render的优先级
if (updateExpirationTime < renderExpirationTime) {
// ...被跳过
} else {
// ...不跳过
}
const renderLanes = 0b0101;
u1.lane = 0b0001;
u2.lane = 0b0010;
function isSubsetOfLanes(set, subset) {
return (set & subset) === subset;
}
// true
isSubsetOfLanes(renderLanes, u1.lane)
// false
isSubsetOfLanes(renderLanes, u2.lane)
u2.lane = 0b0000;
// true
isSubsetOfLanes(renderLanes, 0)
最后


关注公众号:拾黑(shiheibook)了解更多
赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- SiteOneCrawler一款简单易用、功能强大的网站分析工具
- 【杂谈快报】中移动杨杰:建议中小学普及编程教育,课程从元宇宙等产业入手
- 韩元汇率对人民币2023年1月25日
- 乔布斯编号电脑预计成交价 265 万元 ;开源软件托管商 Fosshost CEO 失联|思否周刊
- 来微软商业应用行业解决方案路演会,于香茗论道中共赢未来!
- 全球云市场集中度提高,阿里云或将掉队 | 热点关注
- 三大运营商2021年业绩报告:营收利润双提速 5G释放新动能
- 想明白了这件事,理直气壮 “买前生产力,买后 XXX”
- 一文看懂Python学习路径!
- AirPods瑕疵频现,问题出在“越南制造”?
- (待会删)粉丝永久白嫖,新发现的外·卖漏·洞!希望不要被封杀!
- 【周末荐书】慢教授:做一只奔跑的蜗牛