React 是用來建立使用者介面的流行 JavaScript 函式庫。它以高效且專注於創建可重複使用的 UI 元件而聞名。 React 的關鍵特性之一是引入了鉤子，它是掛鉤到 React 狀態的函數。這些鉤子中的一個是 useTransition 鉤子。該鉤子允許在不阻塞介面的情況下發生狀態更改，從而帶來流暢的體驗。

了解 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(
    

      {post !== undefined && (
      

        
{post?.title}
        
{post?.content}
      
      )}
      
        Get post
      
    
  )
}

export default App; 

當使用者點擊按鈕時，取決於網路的速度有多慢或 fetchData 函數內執行的任務有多繁重，UI 可能會在取得任務期間凍結，這將導致使用者體驗不佳。如果您不希望用戶濫用您的應用程序，也可能會向按鈕發送垃圾郵件。此外，應用程式不會向使用者顯示任何正在進行的操作的指示。

這些問題可以使用 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(
    

      {post !== undefined && (
      

        
{post.title}
        
{post.content}
      
      )}
      
        {pending ?  : "Get post" }
      
    
  )
}

export default App; 

呼叫的useTransition鉤子傳回兩個值：pending，如果任務被執行且startTransition函數包含可能被更緊急的任務中斷的任務，則該值將為true。

在上面的範例中，我們將取得請求包裝在 startTransition 函數內部的非同步箭頭函數中。

並且在按鈕中，我們以包含連結到待處理的禁用屬性的方式對其進行修改，並且我們更改了按鈕的標籤，以在任務待處理時顯示微調器，並在任務待處理時顯示標籤「取得貼文」。任務沒有待處理。

這會帶來流暢的用戶體驗並提供更好的性能並保護您的應用程式免受用戶不當行為的影響。

結論

useTransition 鉤子是一個遊戲規則改變者，用於建立具有流暢用戶體驗的高效能 React 應用程式。它確保 UI 在可能緩慢的操作期間保持回應並防止 UI 凍結，從而增強整體使用者體驗。