如何使用 useTransition hook 提高 React 效能-js教程-PHP中文網

如何使用 useTransition hook 提高 React 效能

WBOY

發布： 2024-08-22 18:40:05

原創

932 人瀏覽過

How to use the useTransition hook the improve performance in 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 函數內的非同步箭頭函數中。

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

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