如何使用 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 函数内的异步箭头函数中。

并且在按钮中，我们以包含链接到待处理的禁用属性的方式对其进行修改，并且我们更改了按钮的标签，以在任务待处理时显示微调器，并在任务待处理时显示标签“获取帖子”任务没有待处理。

这会带来流畅的用户体验，并提供更好的性能，并保护您的应用程序免受用户不当行为的影响。