web 前端培训 React 如何原生实现防抖
useTransition Demo
useTransition 是一个新增的原生 Hook,用于以较低优先级执行一些更新。
在我们的 Demo 中有 ctn 与 num 两个状态,其中 ctn 与输入框的内容受控。
当触发输入框 onChange 事件时,会同时触发 ctn 与 num 状态变化。其中触发 num 状态变化的方法(即 updateNum)被包裹在 startTransition 中:
function App() {
const [ctn, updateCtn] = useState('');
const [num, updateNum] = useState(0);
const [isPending, startTransition] = useTransition();
return (
<div >
<input value={ctn} onChange={({target: {value}}) => {
updateCtn(value);
startTransition(() => updateNum(num + 1))
}}/>
<BusyChild num={num}/>
</div>
);
}
num 会作为 props 传递给 BusyChild 组件。在 BusyChild 中通过 while 循环人为增加组件 render 所消耗的时间:
const BusyChild = React.memo(({num}: {num: number}) => {
const cur = performance.now();
// 增加 render 的耗时
while (performance.now() - cur < 300) {}
return <div>{num}</div>;
})
所以,在输入框输入内容时能明显感到卡顿。
![](https://static001.geekbang.org/infoq/58/58058af8f0fbe96d661070550dc68123.png)
按理说,onChange 中会同时触发 ctn 与 num 的状态变化,他们在视图中的显示应该是同步的。
然而实际上,输入框连续输入一段文字(即 ctn 的状态变化连续展示在视图中)后,num 才会变化一次_前端培训。
如下图,初始时输入框没有内容,num 为 0:
![](https://static001.geekbang.org/infoq/fb/fbcea9dfbeafb8d29d111db7c5ab8610.png)
输入框输入很长一段文字后,num 才变为 1:
![](https://static001.geekbang.org/infoq/92/92541a6218940e6168977a917de325bc.png)
这种效果就像:被 startTransition 包裹的更新都有防抖的效果一样。
这是如何实现的呢?
什么是 lane
在 React18 中有一套更新优先级机制,不同地方触发的更新拥有不同优先级。优先级的定义依据是符合用户感知的,比如:
用户不希望输入框输入文字会有卡顿,所以 onChange 事件中触发的更新是同步优先级(最高优)
用户可以接受请求发出到返回之间有等待时间,所以 useEffect 中触发的更新是默认优先级
那么优先级怎么表示呢?用一个 31 位的二进制,被称为 lane。
比如同步优先级和默认优先级定义如下:
const SyncLane = 0b0000000000000000000000000000001;
const DefaultLane = 0b0000000000000000000000000010000;
数值越小优先级越大,即 SyncLane < DefaultLane。
那么 React 每次更新是不是选择一个优先级,然后执行所有组件中这个优先级对应的更新呢?
不是。如果每次更新只能选择一个优先级,那灵活性就太差了。
所以实际情况是:每次更新,React 会选择一到多个 lane 组成一个批次,然后执行所有组件中包含在这个批次中的 lane 对应的更新
这种组成批次的 lane 被称为 lanes。
比如,如下代码将 SyncLane 与 DefaultLane 合成 lanes:
// 用“按位或”操作合并 lane
const lanes = SyncLane | DefaultLane;
entangle 机制
可以看到,lane 机制本质上就是各种位运算,可以设计的很灵活。
在此基础上,有一套被称为 entangle(纠缠)的机制。
entangle 指一种 lane 之间的关系,如果 laneA 与 laneB 纠缠,那么某次更新 React 选择了 laneA,则必须带上 laneB_前端视频。
也就是说 laneA 与 laneB 纠缠在一块,同生共死了。
除此之外,如果 laneA 与 laneC 纠缠,此时 laneC 与 laneB 纠缠,那么 laneA 也会与 laneB 纠缠。
那么 entangle 机制与 useTransition 有什么关系呢?
被 startTransition 包裹的回调中触发的更新,优先级为 TransitionLanes 中的一个。
TransitionLanes 中包括 16 个 lane,分别是 TransitionLane1 到 TransitionLane16:
![](https://static001.geekbang.org/infoq/46/465303485519da5edcd02ab5e978e4bc.png)
而 transition 相关 lane 会发生纠缠。
在我们的 Demo 中,每次 onChange 执行,都会创建两个更新:
onChange={({target: {value}}) => {
updateCtn(value);
startTransition(() => updateNum(num + 1))
}
其中:
updateCtn(value)由于在 onChange 中触发,优先级为 SyncLane
updateNum(num + 1)由于在 startTransition 中触发,优先级为 TransitionLanes 中的某一个
当在输入框中反复输入文字时,以上过程会反复执行,区别是:
SyncLane 由于是最高优先级,会被执行,所以我们会看到输入框中内容变化
TransitionLanes 相关 lane 优先级比 SyncLane 低,暂时不会执行,同时他们会产生纠缠
为了防止某次更新由于优先级过低,一直无法执行,React 有个过期机制:每个更新都有个过期时间,如果在过期时间内都没有执行,那么他就会过期。
过期后的更新会同步执行(也就是说他的优先级变得和 SyncLane 一样)
在我们的例子中,startTransition(() => updateNum(num + 1))会产生很多纠缠在一块的 TransitionLanes 相关 lane。
过了一段时间,其中某个 lane 过期了,于是他优先级提高到和 SyncLane 一样,立刻执行。
又由于这个 lane 与其他 TransitionLanes 相关 lane 纠缠在一起,所以他们会被一起执行。
这就表现为:在输入框一直输入内容,但是 num 在视图中显示的数字过了会儿才变化。
总结
今天我们聊了 useTransition 内部的一些实现,涉及到:
lane 模型
entangle 机制
更新过期机制
最有意思的是,由于不同电脑性能不同,浏览器帧率会变动,所以在不同电脑中 React 会动态调节防抖的效果。
这就相当于不需要你手动设置 debounce 的时间参数,React 会根据电脑性能动态调整。
文章来源于 SegmentFault 思否
评论