useTransition基本用法转给别人的github库，他写的其他hooks的使用也很清楚易懂useTransition概念介绍react提供useDeferredValue起到类似防抖节流的作用，和useTransition有类似的效果，但是hook是通过降低数据渲染的优先级来先更新其他数据。useTransition用来解决什么问题？首先，给定一个场景，在开发的时候，经常会遇到需要关联输入，即输入的同时需要返回一个关联搜索结果的列表。但是有时候这个列表的返回值很长，有时候会导致用户输入值的更新很慢。这是一个问题。当页面有大量UI更新时，如何处理数据更新而不卡顿。手写防抖节流即可。防抖有个缺点。当我们长时间持续输入时（时间间隔小于防抖设置的时间），页面会长时间无响应。而startTransition可以指定UI的渲染优先级，哪些需要实时更新，哪些需要延迟。即使用户长时间输入，最迟5s也会更新一次。也可以使用useDeferredValue，也可以使用“可视化窗口加载”的方案。下面是如何使用useTransition解决useTransition的源码。回到useTransition的研究，先看React源码中的ReactHooks.js。导出函数useTransition():[boolean,(callback:()=>void,options?:StartTransitionOptions)=>void,]{constdispatcher=resolveDispatcher();returndispatcher.useTransition();}然后根据import文件，到react-reconciler/src/ReactInternalTypes.js中找到Dispatch中最后调用的useTransitionuseTransition():[boolean,(callback:()=>void,options?:StartTransitionOptions)=>void,],上面代码看不懂没关系，本系列教程只讲“如何使用Hook”，不讲“Hook源码分析”。^_^useTransition基本用法useTransition()函数不需要传递参数。该参数可以传递一个毫秒值来修改最新的更新时间，startTransition回调中的赋值会降低优先级。isPending指示转换任务何时处于活动状态以显示挂起状态。代码形式const[isPending,startTransition]=useTransition();startTransition(()=>{setCount(count+1);})传参写法//延时两秒const[isPending,startTransition]=useTransition(2000);startTransition(()=>{setCount(count+1);})useTransition例子：搜索引擎关键词关联。一般来说，希望用户在输入框中的输入能够实时更新。如果此时联想词较多，需要实时更新，这可能会导致用户输入卡顿。这样一来，用户体验会变差，这不是我们想要的结果。我们提取这个场景的状态更新：一个是用户输入的更新；二是联想词的更新。这两次更新的紧迫性明显大于后者。这里的更新效果可能不够明显，可以打开浏览器控制台，点击performanceinsights项，Measurepageload右侧有下拉选项，右侧选择4xslowdowncpu一栏让浏览器变慢四倍，这样卡顿会更明显。它在这里分为两个部分。父组件是useTransition的使用，子组件是列表渲染。代码如下：父组件：import{useState,useTransition}from'react'importProductListfrom'./components/ProductList'//list数据生成exportfunctiongenerateProducts(){constproducts:Array
