1、useTransition
useTransition 的作用
执行过渡效果时(假设从UI a过渡到UI b),通常处理逻辑包括3个状态:
- 初始情况是UI a
- 开启过渡后,显示过渡中(比如loading)效果
- 过渡完成后切换到UI b
传统「过渡中」效果的弊端:
- 时间比较短时,「过渡中效果」可能比较生硬
- 「加载过程阻塞UI」也会带来不好的 UX
- useTransition 作用是:切换 UI 时,先显示旧的 UI,待新的 UI 加载完成后再显示新的 UI
useTransition 的实现
useTransition的作用翻译成源码术语:
- 切换UI -> 触发更新
- 先显示旧的UI,待新的UI加载完成后再显示新的UI -> 「切换新UI」对应低优先级更新
实现的要点:
- 实现基础hook工作流程
- 实现Transition优先级
- useTransition的实现细节
2、源码