react 是一個用于構建用戶界面的流行 javascript 庫。它以高效且專注于創(chuàng)建可重用的 ui 組件而聞名。 react 的關鍵特性之一是引入了鉤子，它是掛鉤到 react 狀態(tài)的函數(shù)。這些鉤子中的一個是 usetransition 鉤子。該鉤子允許在不阻塞界面的情況下進行狀態(tài)更改，從而帶來流暢的體驗。
了解 usetransition 鉤子
為了更好地理解 usetransition 鉤子，我們將研究以下示例。
import {usestate} from "react"
const app = () => {
const [post, setpost] = usestate(undefined)
const fetchdata = async () => {
await fetch("https://jsonplaceholder.org/posts/1")
.then((result) => result.json())
.then((result) => setpost(result))
}
return(
<div>
{post !== undefined && (
<div classname="post-card">
<h2>{post?.title}</h2>
<image src="%7Bpost?.image%7D"></image><p>{post?.content}</p>
</div>
)}
<button onclick="{fetchdata}">
get post
</button>
</div>
)
}
export default app;
登錄后復制
當用戶單擊按鈕時，根據(jù)互聯(lián)網(wǎng)的速度或 fetchdata 函數(shù)內執(zhí)行的任務的繁重，ui 可能會在獲取任務期間凍結，這將導致用戶體驗不佳。如果您不希望用戶濫用您的應用程序，也可能會向按鈕發(fā)送垃圾郵件。此外，應用程序不會向用戶顯示任何正在進行的操作的指示。
使用 usetransition 鉤子可以輕松解決這些問題，我們可以將之前的代碼更新為類似這樣的內容。
import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"
const App = () => {
const [pending, startTransition] = useTransition()
const [post, setPost] = useState({})
const fetchData = () => {
startTransition( async () => {
await fetch("https://jsonplaceholder.org/posts/1")
.then((result) => result.json())
.then((result) => setPost(result))
})
}
return(
<div>
{post !== undefined && (
<div classname="post-card">
<h2>{post.title}</h2>
<image src="%7Bpost.image%7D"></image><p>{post.content}</p>
</div>
)}
<button disabled onclick="{fetchData}">
{pending ? <imspinner2 classname="animate-spin"></imspinner2> : "Get post" }
</button>
</div>
)
}
export default App;
登錄后復制
調用的usetransition鉤子返回兩個值：pending，如果任務執(zhí)行完畢并且starttransition函數(shù)包含可能被更緊急的任務打斷的任務，則該值將為true。
在上面的示例中，我們將獲取請求包裝在 starttransition 函數(shù)內的異步箭頭函數(shù)中。
并且在按鈕中，我們以包含鏈接到待處理的禁用屬性的方式對其進行修改，并且我們更改了按鈕的標簽，以在任務待處理時顯示微調器，并在任務待處理時顯示標簽“獲取帖子”任務沒有待處理。
這會帶來流暢的用戶體驗，并提供更好的性能，并保護您的應用程序免受用戶不當行為的影響。
結論
usetransition 鉤子是一個游戲規(guī)則改變者，用于構建具有流暢用戶體驗的高性能 react 應用程序。它確保 ui 在可能緩慢的操作期間保持響應并防止 ui 凍結，從而增強整體用戶體驗。
