react 18,react17新增特性
本文将带您了解react18的新概念Transition，并简要介绍如何使用新的API:startTransition和hooks:useTransition和usedeferredValue。希望对你有帮助！
在React 18中引入了一个新概念——transition，它带来了一个新的API —— Start Transition和两个新的钩子3354 Use Transition和usedeferredValue。本文介绍了早期采用者的使用。【相关推荐：Redis视频教程】
1. 总览
本文分为四个部分：
谭情境的本意：开始过渡使用和引入使用过渡使用和引入使用默认值使用和引入2. transition产生初衷
Transition直接翻译为过渡。过渡本质上是为了解决渲染并发的问题而提出的。在React中，一旦组件状态改变并且重新渲染被触发，渲染就不能停止。在组件重新呈现之前，页面无法继续响应用户交互。
因此，react 18中的更新可以分为以下两类：
紧急更新：用户期望立即响应的更新操作，如鼠标点击或键盘输入。过渡更新：一些延迟可接受的更新操作，如查询、搜索推荐、显示搜索结果等。//被StartTransit标记后，是过渡更新。
startTransition(()={
//非紧急更新会降低优先级，延迟执行。
setQueryValue(输入值)
})
//如果没有标记，则立即执行。
react 18中startTrionstion标记的setInputValue(输入值)的更新是过渡性更新(执行优先级降低)。此时，react将根据内部调度机制延迟内部状态更新。
开发人员可以通过transition hook决定哪些更新被标记为转换事件。一旦被标记，就意味着低优先级执行，即react知道状态可以延迟更新，通过区分更新优先级，可以保持高优先级事件响应，提高用户交互体验，保持页面响应。
3. startTransiton
startTransiton使用介绍
const handleClick=()={
//startTransition包被标记为低优先级更新。
startTransition(()={
setQueryValue(输入值)
})
//如果没有标记，则立即执行。
设置输入值(输入值)
}首先我们来介绍一下最简单的startTransition
StartTransiton是一个接受回调的函数，用来告诉React需要延迟更新的状态。如果一个状态的更新会导致组件挂起，那么应该在startTransition中将它包装成通过演示对比。
这是一个输入字符后显示搜索结果的场景模拟。通过伪造大量的搜索结果，模拟出容易被卡住的情况。
我们尝试连续输入123，监测搜索框值(紧急更新)和searchValue搜索值(过渡更新)的变化，输出到控制栏。
从“react”导入React，{ useEffect，useState，start transition }；
“导入”。/App.css
const SearchResult=(props)={
const resultList=props.query
？Array.from({ length: 10000 }，(_，index)=({
id:索引，
关键字：` $ { props . query }-搜索结果$ {index } `，
})) : [];
返回resultList.map(({ id，keyword })=(
li key={id}{keyword}/li
))
}
const App=()={
const [type，setTpye]=useState(1)
const [value，setValue]=use state()；
const [searchVal，setSearchVal]=useState(-)；
useEffect(()={
//侦听搜索值的更改
Console.log(对搜索值更新的响应 searchVal )
}，[searchVal])
useEffect(()={
Console.log(对输入框值更新的响应-)
if (type===1) {
setSearchVal(值 -)
}
if (type===2) {
startTransition(()={
setSearchVal(值 -)
})
}
}，[值，类型])；
返回(
div className=App
输入值={ value } onChange={ e=setValue(e . target . value)}/
div class name={ ` type _ button $ { type===1？type _ button _ checked : } `} onClick={()=setTpye(1)} normal/div
div class name={ ` type _ button $ { type===2？type _ button _ checked : } `} onClick={()=setTpye(2)} transition/div
保险商实验所
搜索结果查询={searchVal}/SearchResult
/ul
/div
);
};在正常模式下
如图：连续输入字符123。当输入第一个字符时，搜索值会立即响应，列表渲染会立即开始，导致卡顿输入框停止响应用户输入，直到渲染完成，输入框才会继续响应。
开始过渡
如图：连续输入字符123，输入框连续响应，搜索值响应延迟，保证页面反馈。直到输入结束，页面才响应搜索值，呈现搜索结果，并保留页面响应。
4. useTransiton
useTransiton使用介绍
从“react”导入{ useTransiton }
const [isPending，start transition]=use transition({ time out ms:2000 })
//例如，在挂起状态下，可以显示一个微调器
{ isPending？Spinner/:null }startTransition是一个接受回调的函数，用来告诉React需要延迟更新的状态。IsPending是一个布尔值，react通过它告诉我们是否要等待转换完成。UseTransition接受带有timeoutMs的延迟响应的值。如果给定的timeoutMs没有完成，它将强制更新startTransition回调函数中的状态。useTransiton简单分析
让我们通过伪代码来理解useTransition。
函数useTransition(){
const [isPending，set pending]=mount state(false)；
常量开始=(回调)={
setPending(真)；
//Scheduler.unstable_next通过transiton模式，回调函数以低优先级调度执行。
//您可以降低更新的优先级。如果回调中触发的更新优先级较低，
//它会让位于高优先级的更新，或者当当前事务繁忙时，它会被调度应用到下一个空闲期。
Scheduler.unstable_next(()={
const prev transition=reactcurrentbatchconfig . transition；
reactcurrentbatchconfig . transition=1；
尝试{
setPending(假)；
//实现回调函数
回调()；
}最后{
reactcurrentbatchconfig . transition=prev transition；
}
})
}
return [isPending，start]；
}在执行}startTransition的过程中，setPending会被触发两次，一次在transition=1之前，一次在transition=1之后。调用startTransition时为SetPending(true)，执行startTransition内部的回调函数时Transition任务更新setPending(false)。React可以根据pending值的变化准确把握等待的跃迁时间，并据此判断是否已经超过timeoutMs(如果有传入的)来强制更新。
5. useDeferredValue
useDeferredValue使用介绍
const [value，setValue]=useState( )
//defferedValue值晚于状态更新。
const Deferred Value=use Deferred Value(Value，{ timeoutMs:2000 })use Deferred Value返回延迟响应的状态，可以设置最大延迟时间time out ms。可以传入可选的timeoutMs，如果在给定的timeoutMs内没有完成，将强制更新。与useTransition的不同：useTransition是处理一段逻辑，而useDeferred是生成一个新的状态。useDeferredValue的使用
从“react”导入React，{ useEffect，useState，useTransition，useDeferredValue }；
“导入”。/App.css
const SearchResult=(props)={
const resultList=props.query
？Array.from({ length: 10000 }，(_，index)=({
id:索引，
关键字：` $ { props . query }-搜索结果$ {index } `，
})) : [];
返回resultList.map(({ id，keyword })=(
li key={id}{keyword}/li
))
}
const App=()={
const [value，setValue]=use state()；
const search value=useDeferredValue(value，{ time out ms:2000 })；
useEffect(()={
Console.log(对输入框值的响应-)
}，[值])
useEffect(()={
//侦听搜索值的更改
Console.log(对searchValue的更新响应 searchvalue )
}，[搜索值])
返回(
div className=App
输入值={ value } onChange={ e=setValue(e . target。值)}/
div class name={ ` type _ button type _ button _ checked ` } useDeferredValue/div
保险商实验所
搜索结果查询={搜索值}/搜索结果
/ul
/div
);
};
useDeferredValue简单分析
我们通过伪代码理解下useDeferredValue。
函数useDeferredValue(值){
const [prevValue，setValue]=updateState(value)；
updateEffect(()={
//在使用效果中通过过渡模式来更新价值。
Scheduler.unstable_next(()={
const prev transition=reactcurrentbatchconfig。过渡；
reactcurrentbatchconfig。过渡=1；
尝试{
设置值(值);
}最后{
reactcurrentbatchconfig。过渡=前一次过渡；
}
})
},[值]);
返回前值
}useDeferredValue通过使用效果监听传入值的变化，然后通过过渡任务执行值的改变。这样保证双爆炸成形环默认值的更新滞后于setState，同时符合过渡更新的原则，因为是通过过渡调度机制执行的。
更多编程相关知识，请访问：编程视频！以上就是浅析react18中的新概念过渡的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。