小推理: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/

随时掌握互联网精彩
- 微信小店越来越多 为什么我还是不想在微信上买东西
- MariaDB著名的MySQL分支版本
- 韩元汇率对人民币2023年10月1日
- 英镑兑换人民币汇率2023年8月14日
- 韩元汇率对人民币2023年6月12日
- 【杂谈快报】字节跳动裁员:头条抖音飞书等均有优化名额;抖音上线桌面端聊天软件“抖音聊天”
- GSMA重申欧洲5G发展滞后警告,强调要公平分摊网络成本
- Adobe发布元宇宙白皮书,加速企业营销向数字化转型
- 从“跟跑”到“赶超”,我国偏光片悄然崛起
- Win11又升级,经典Windows组件大翻新!
- 快手科技通过港交所上市聆讯;腾讯音乐娱乐集团收购“懒人听书”100%股权:美团将于 1 月 31 日关停互助业务|Do早报
- 特斯拉虎入羊群?