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 冻结，从而增强整体用户体验。