全部版块 我的主页
论坛 数据科学与人工智能 IT基础 Scala及其他JVM语言
2686 2
2023-09-20
[完结11章]2023 React 18 系统入门 进阶实战《欢乐购》
学习地址1:https://pan.baidu.com/s/1XZFaVv7Zks4nPRZQIITElA 提取码: y6ip
学习地址2:https://share.weiyun.com/8UiEaunA 密码:rk4ict


[完结11章]2023 React 18 系统入门 进阶实战《欢乐购》。React 的状态更新可以分为两类:
紧急更新(Urgent updates):比如打字、点击、拖动等,需要立即响应的行为,如果不立即响应会给人很卡,或者出问题了的感觉
过渡更新(Transition updates):将 UI 从一个视图过渡到另一个视图。不需要即时响应,有些延迟是可以接受的。
我以前会认为,CM 模式会自动帮我们区分不同优先级的更新,一键无忧享受。很遗憾的是,CM 只是提供了可中断的能力,默认情况下,所有的更新都是紧急更新。
这是因为 React 并不能自动识别哪些更新是优先级更高的。

优先级分类
高优先级的更新/渲染:包括鼠标点击、输入框、拖拽、移动等对实时交互性要求很高的更新场景,卡顿时会影响用户的交互行为,使用户明显感到整个页面卡顿。一般这种会使用防抖或节流来减少高频率的操作。
非高优先级的更新/渲染:普通的 UI 更新,不与用户的交互相关,一些对更新实时性要求没那么高的场景。比如接口的请求。
React 18 为我们提供了并发渲染方式来解决这个问题:使用 starTransition 和 useTransition,只有用到这些 API 时才会开启并发更新。

什么是优先级
legacy模式下没有优先级的概念,因此所有任务都是同步执行。而开启并发特性后一切行为的基础就是任务的优先级。

在react应用中我们可能在不同上下文中触发setState,如点击/输入事件,异步接口回调,react18中也可能在concurrentAPI中触发等等。在react18中不同上下文中触发的setState的优先级是不一样的。react使用lane模型来描述优先级,该模型使用31位二进制来表示优先级, 位数越小(值越小)则优先级越高。


二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

全部回复
2023-9-20 14:23:02
谢谢分享!
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

2023-9-20 14:32:10
谢谢分享
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

相关推荐
栏目导航
热门文章
推荐文章

说点什么

分享

扫码加好友,拉您进群
各岗位、行业、专业交流群