react 是一個(gè)用于構(gòu)建用戶界面的流行 javascript 庫(kù)。它以高效且專注于創(chuàng)建可重用的 ui 組件而聞名。 react 的關(guān)鍵特性之一是引入了鉤子，它是掛鉤到 react 狀態(tài)的函數(shù)。這些鉤子中的一個(gè)是 usetransition 鉤子。該鉤子允許在不阻塞界面的情況下進(jìn)行狀態(tài)更改，從而帶來(lái)流暢的體驗(yàn)。
了解 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;
登錄后復(fù)制
當(dāng)用戶單擊按鈕時(shí)，根據(jù)互聯(lián)網(wǎng)的速度或 fetchdata 函數(shù)內(nèi)執(zhí)行的任務(wù)的繁重，ui 可能會(huì)在獲取任務(wù)期間凍結(jié)，這將導(dǎo)致用戶體驗(yàn)不佳。如果您不希望用戶濫用您的應(yīng)用程序，也可能會(huì)向按鈕發(fā)送垃圾郵件。此外，應(yīng)用程序不會(huì)向用戶顯示任何正在進(jìn)行的操作的指示。
使用 usetransition 鉤子可以輕松解決這些問(wèn)題，我們可以將之前的代碼更新為類似這樣的內(nèi)容。
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;
登錄后復(fù)制
調(diào)用的usetransition鉤子返回兩個(gè)值：pending，如果任務(wù)執(zhí)行完畢并且starttransition函數(shù)包含可能被更緊急的任務(wù)打斷的任務(wù)，則該值將為true。
在上面的示例中，我們將獲取請(qǐng)求包裝在 starttransition 函數(shù)內(nèi)的異步箭頭函數(shù)中。
并且在按鈕中，我們以包含鏈接到待處理的禁用屬性的方式對(duì)其進(jìn)行修改，并且我們更改了按鈕的標(biāo)簽，以在任務(wù)待處理時(shí)顯示微調(diào)器，并在任務(wù)待處理時(shí)顯示標(biāo)簽“獲取帖子”任務(wù)沒(méi)有待處理。
這會(huì)帶來(lái)流暢的用戶體驗(yàn)，并提供更好的性能，并保護(hù)您的應(yīng)用程序免受用戶不當(dāng)行為的影響。
結(jié)論
usetransition 鉤子是一個(gè)游戲規(guī)則改變者，用于構(gòu)建具有流暢用戶體驗(yàn)的高性能 react 應(yīng)用程序。它確保 ui 在可能緩慢的操作期間保持響應(yīng)并防止 ui 凍結(jié)，從而增強(qiáng)整體用戶體驗(yàn)。
