// 使用场景: 某个页面渲染时需要消耗很长时间, 适合使用改hooks
// useTransition: 可以将一个更新转为低优先级更新, 使其可以被打断, 不阻塞UI对用户操作的响应, 能够提高用户的使用体验. 它常用于优化视图切换时的用户体验
// isPending: 是否在加载中, startTransition: 降低优先级更新
import React, {FC, useState, useTransition} from "react";
export const Entity: FC = () => {
const [tab, setTab] = useState(1)
const [isPending, startTransition] = useTransition();
const handleClick = () => {
startTransition(() => {
setTab(tab == 1 ? 2 : 1)
})
}
return <div onClick={handleClick}>
{isPending ? <p>Loading...</p> : <>
{tab == 1 && 1}
{tab == 2 && 1}
</>}
</div>
}
useTransition使用场景及介绍
于 2024-05-30 16:49:38 首次发布