- 当前位置：首页 >焦点 >给女朋友讲React18新特性：startTransition
给女朋友讲React18新特性：startTransition
发布时间：2025-11-05 15:45:50 来源：云智核 作者：IT科技类资讯
大家好，朋友我是新特性卡颂。
我女友是朋友个铁憨憨，又菜又爱玩。新特性
她问我：“卡卡，朋友你说时光真的新特性可以重来?命运真是可以选择的么?”
我：“可以的，React18的朋友新特性startTransition就行。”
startTransition的新特性出现当然不是为了逆转命运，而是朋友为了逆转React的更新流程。
"在聊startTransition的新特性具体应用场景前，我先来聊聊React是朋友如何扬长避短的。"
编译时的新特性短，运行时的朋友长
如果我们用「重编译时还是运行时」区分前端框架。那么Vue和Svelte就是新特性「重编译时」的杰出代表。
在「编译时」，服务器租用朋友这两个框架可以分离模版语法中「变」与「不变」的部分，减少运行时的代码逻辑。
而React由于使用JSX(而非模版语法)描述视图，走的是「重运行时」的路线。
不是React不想在「编译时」做优化，奈何JSX实在太灵活，做不到啊......所以他的优化策略也都是偏「运行时」。
在「运行时」，最大的开销是：状态更新到视图变化中间的计算步骤。
这个步骤是通过「遍历Fiber树」实现的。
常规的「运行时优化策略」，比如：
React.memo PureComponent shouldComponentUpdate优化方向都是：减少遍历时需要遍历的Fiber节点数量。
虽说性能优化的收益可以积少成多，但是React团队早已不满足这种局部的小优化。IT技术网
性能优化新思
路他们的思路是：
不同更新触发的视图变化显然是有轻重缓急的。
如果能区分更新的优先级，让高优更新对应的视图变化先渲染，那么就能在设备性能不变的情况下，让用户更快看到他们想看到的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/
- Copyright © 2025 Powered by 给女朋友讲React18新特性：startTransition,云智核 滇ICP备2023006006号-28sitemap