作者：卡颂
简介：《React技术揭秘》作者
来源：SegmentFault思否社区
大家好，我卡颂。
作为前端，想必你对防抖（debounce）、节流（throttle）这两个概念不陌生。
在React18中，基于新的并发特性，React原生实现了防抖的功能。
今天我们来聊聊这是如何实现的。
useTransitionDemouseTransition是一个新增的原生Hook，用于以较低优先级执行一些更新。在我们的Demo中有ctn与num两个状态，其中ctn与输入框的内容受控。
当触发输入框onChange事件时，会同时触发ctn与num状态变化。其中触发num状态变化的方法（即updateNum）被包裹在startTransition中：
functionApp(){const[ctn,updateCtn]=useState();const[num,updateNum]=useState(0);const[isPending,startTransition]=useTransition();return(divinputvalue={ctn}onChange={({target:{value}})={updateCtn(value);startTransition(()=updateNum(num+1))}}/BusyChildnum={num}//div);}
num会作为props传递给BusyChild组件。在BusyChild中通过while循环人为增加组件render所消耗的时间：
constBusyChild=React.memo(({num}:{num:number})={constcur=performance.now();//增加render的耗时while(performance.now()-cur){}returndiv{num}/div;})
所以，在输入框输入内容时能明显感到卡顿。
在线示例