如何使用 useTransition hook 提高 React 效能

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(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post?.title}</h2>
        <image src={post?.image} />
        <p>{post?.content}</p>
      </div>
      )}
      <button onClick={fetchData}>
        Get post
      </button>
    </div>
  )
}

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(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post.title}</h2>
        <image src={post.image} />
        <p>{post.content}</p>
      </div>
      )}
      <button
        disabled={pending} 
        onClick={fetchData}>
        {pending ? <ImSpinner2 className="animate-spin" /> : "Get post" }
      </button>
    </div>
  )
}

export default App; 

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

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

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

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

結論

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

以上是如何使用 useTransition hook 提高 React 效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！