React 源码解析 - useTransition

53 阅读1分钟

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的实现细节

image.png

2、源码

useTransition.png