大家好，我是卡颂。
我女友是个铁憨憨，又菜又爱玩。
她问我：“卡卡，你说时光真的可以重来?命运真是可以选择的么?”
我：“可以的，React18的新特性startTransition就行。”
startTransition的出现当然不是为了逆转命运，而是为了逆转React的更新流程。
"在聊startTransition的具体应用场景前，我先来聊聊React是如何扬长避短的。"
编译时的短，运行时的长
如果我们用「重编译时还是运行时」区分前端框架。那么Vue和Svelte就是「重编译时」的杰出代表。
在「编译时」，这两个框架可以分离模版语法中「变」与「不变」的部分，减少运行时的代码逻辑。
而React由于使用JSX(而非模版语法)描述视图，走的是「重运行时」的路线。
- 不是React不想在「编译时」做优化，奈何JSX实在太灵活，做不到啊......
所以他的优化策略也都是偏「运行时」。
在「运行时」，最大的开销是：状态更新到视图变化中间的计算步骤。
这个步骤是通过「遍历Fiber树」实现的。
常规的「运行时优化策略」，比如：
- React.memo
- PureComponent
- shouldComponentUpdate
优化方向都是：减少遍历时需要遍历的Fiber节点数量。
虽说性能优化的收益可以积少成多，但是React团队早已不满足这种局部的小优化。
性能优化新思
路他们的思路是：
不同更新触发的视图变化显然是有轻重缓急的。
如果能区分更新的优先级，让高优更新对应的视图变化先渲染，那么就能在设备性能不变的情况下，让用户更快看到他们想看到的UI。
比如：对于这样一个搜索下拉框：
用户期望：输入框输入的内容要实时反映在视图上(表现为输入内容不能卡顿)。
而结果下拉框的展示是可以有延迟的。
基于以上逻辑，React希望提供一个API，让用户告诉自己，哪些更新是「高优」的，哪些是「低优」的。
这样，React就能知道优先渲染谁了。
这个API，就是startTransition。
startTransition的使用
接下来，我们用一个Demo[1]演示startTransition的使用。
这个Demo会渲染一棵「毕达哥拉斯树」。
拖动左边滑块会改变树渲染的节点数量。
拖动顶部滑块会改变树的倾斜角度。
最顶上有个帧雷达，可以实时显示更新过程中的掉帧情况。
当不点击Use startTransition按钮，拖动顶上的滑块。
可以看到：拖动并不流畅，顶上的帧雷达显示掉帧(出现黄色、红色扇面)
当点击Use startTransition按钮，拖动顶上的滑块。
可以明显看到：拖动变流畅，顶上的帧雷达显示掉帧的情况变少
让我们节选Demo的代码看看，究竟发生了什么。
Demo都做了什么?
首先，控制滑块、树倾斜角度、要渲染的节点数量是分离在不同state中的：
- // 左侧滑块的state
- const [treeSizeInput, setTreeSizeInput] = useState(8);
- // 控制渲染节点数量的state
- const [treeSize, setTreeSize] = useState(8);
- // 顶部滑块的state
- const [treeLeanInput, setTreeLeanInput] = useState(0);
- // 控制树倾斜角度的state
- const [treeLean, setTreeLean] = useState(0);
- // startTransition的hook版本
- const [isLeaning, startTransition] = useTransition();
当拖动顶上的滑块(改变树的倾斜角度)会调用changeTreeLean方法：
- function changeTreeLean(event) {
- const value = Number(event.target.value);
- setTreeLeanInput(value); // update input
- // update visuals
- if (enableStartTransition) {
- startTransition(() => {
- setTreeLean(value);
- });
- } else {
- setTreeLean(value);
- }
- }
该方法会改变两个state：
- 通过调用setTreeLeanInput改变顶部滑块位置相关的state —— treeLeanInput
- 通过调用setTreeLean改变树的倾斜角度相关的state —— treeLean
是否点击Use startTransition按钮的区别，就在于setTreeLean是否会被作为startTransition的回调执行：
- // 是否开启startTransition
- if (enableStartTransition) {
- startTransition(() => {
- setTreeLean(value);
- });
- } else {
- setTreeLean(value);
- }
当作为startTransition的回调执行时，setTreeLean改变的状态(treeLean)对应的视图变化(即：改变树的倾斜角度)会被视为「低优先级的更新」。
即使其与改变滑块状态的方法(setTreeLeanInput)在同一上下文中执行，
由于其优先级较低，React会优先处理「改变滑块状态」对应的视图变化。
表现为：滑块的滑动不卡顿。
startTransition的原理
铁憨憨：“这么酷炫的功能实现起来一定很复杂吧?”
“恰恰相反，依赖于React底层实现的优先级调度模型，startTransition的实现其实很简单!”
以刚才的代码为例，如果加上console.log打印：
- console.log(1);
- startTransition(() => {
- console.log(2);
- setTreeLean(value);
- });
- console.log(3);
那么会依次输出：123
startTransition做的事情很简单，类似这样：
- let isInTransition = false
- function startTransition(fn) {
- isInTransition = true
- fn()
- isInTransition = false
- }
也就是说，当调用startTransition，在其上下文中获取到的全局变量isInTransition为true。
如果startTransition的回调函数fn中包含更新状态的方法(比如上文Demo中的setTreeLean)，
那么这次更新就会被标记为isTransition，类似这样：
- // 调用setTreeLean后会执行的方法（伪代码）
- function setState(value) {
- stateQueue.push({
- nextState: value,
- isTransition: isInTransition
- })
- }
代表这是一个低优先级的过渡更新。
接下来，就是React内部的调度、批处理与更新流程了。
- 批处理的逻辑见给女朋友讲React18新特性：Automatic batching
总结
今天，我们讲了：
- React为了弥补自身弱编译时的缺点，在运行时作出的努力
- startTransition本质是让开发者手动标记更新的优先级
- startTransition的实现原理
铁憨憨：”原来React为了性能优化做了这么多努力，好复杂啊，我还是用Vue吧!“
我：“可不是嘛，React已经在朝着实现一个浏览器的方向发展了。”
参考资料
[1]Demo:
https://swizec.com/blog/a-better-react-18-starttransition-demo/
