useTransition基础用法
给别人的github库提的pr，他写的关于其他hook的使用也很清晰易懂
useTransition概念介绍
react提供了useDeferredValue发挥类似防抖节流的作用，而useTransition也是类似的作用，但是该hook是通过降低数据渲染的优先级来达到优先更新其他数据
useTransition用来解决什么问题？
- 首先给定一个场景，开发时经常会遇到需要联想输入，也就是输入的同时要返回联想搜索结果的列表。
- 但是这个列表有时返回值非常的长，有时会导致用户输入值的更新缓慢，这里就产生了一个问题，当页面有大量UI更新的时候，怎么处理数据更新不会卡顿。
- 可以手写防抖节流，防抖有一个弊端，当我们长时间的持续输入（时间间隔小于防抖设置的时间），页面就会长时间都不到响应。而startTransition 可以指定 UI 的渲染优先级，哪些需要实时更新，哪些需要延迟更新。即使用户长时间输入最迟 5s 也会更新一次。
- 也可以用
useDeferredValue，也可以用“可视窗口加载”的方案，
在这里介绍怎么用useTransition解决
useTransition源码
回到useTransition的学习中，首先看一下React源码中的ReactHooks.js。
export function useTransition(): [
boolean,
(callback: () => void, options?: StartTransitionOptions) => void,
] {
const dispatcher = resolveDispatcher();
return dispatcher.useTransition();
}再根据引入文件，到react-reconciler/src/ReactInternalTypes.js找到Dispatch里最终调用的useTransition
useTransition(): [
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使用示例
举例：搜索引擎的关键词联想。一般来说，对于用户在输入框中输入都希望是实时更新的，如果此时联想词比较多同时也要实时更新的话，这就可能会导致用户的输入会卡顿。这样一来用户的体验会变差，这并不是我们想要的结果。
我们将这个场景的状态更新提取出来：一个是用户输入的更新；一个是联想词的更新，这个两个更新紧急程度显然前者大于后者。
这里更新效果可能还不够明显，可以打开浏览器控制台，点击performance insights项，在Measure page load右边有个下拉选项，在cpu那栏的右边下拉选择4x slowdown可以将浏览器运行速度调慢四倍，这样卡顿会明显些。
这里拆分为两个组件，父组件是useTransition的使用，子组件是列表渲染，代码如下：
父组件：
import { useState, useTransition } from 'react'
import ProductList from './components/ProductList'
// 列表数据的生成
export function generateProducts() {
const products: Array = []
for (let i = 0; i < 10000; i++) {
products.push(`Product ${i + 1}`)
}
return products
}
// 列表数据
const dummyProducts = generateProducts()
// 用户输入时过滤搜索，达到一个联想输入的效果
function filterProducts(filterTerm) {
if (!filterTerm) {
return dummyProducts
}
return dummyProducts.filter((product) => product.includes(filterTerm))
}
function App() {
const [isPending, startTransition] = useTransition()
const [filterTerm, setFilterTerm] = useState('')
const filteredProducts = filterProducts(filterTerm)
function updateFilterHandler(event) {
// 列表数据赋值的运行等级
startTransition(() => {
setFilterTerm(event.target.value)
})
}
return (
{isPending && 更新列表。.
}
子组件：
import { useDeferredValue } from "react";
function ProductList({ products }) {
const deferredProducts = useDeferredValue(products);
return (
{deferredProducts.map((product, index) => (
- {product}
))}
);
}
export default ProductList;通过这个案例，相信你对useMemo的机制和用法一定有所掌握。
至此，关于useTransition基础用法已经讲完。