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

随时掌握互联网精彩
- RedisInsight Redis官方出品的可视化管理工具
- 美元兑人民币汇率2024年07月13日
- 卢布汇率人民币2024年2月2日
- 听说过 AI 绘画,但从来没尝试过。要不先画个老婆?
- OpenAI、TikTok等公司联合签署AI指南,构建负责任的AIGC
- 【大公司创新情报】中国石化于天津投资成立中石化碳科(天津)有限公司
- 工业和信息化部党组书记调整
- 中国电科45所湿法设备进入国内主流8英寸芯片产线
- 信息技术助力碳中和,新型显示技术大有可为产业应有作为
- OnePlus 9RT测评:标志性的“T式”升级
- 道德扭曲or人性沦丧?红白机游戏为啥只给你三条命?
- 统信UOS V20 专业版(1020)更新内容一览