useTransition使用场景及介绍

// 使用场景: 某个页面渲染时需要消耗很长时间, 适合使用改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>
}