React のパフォーマンスを向上させる useTransition フックの使用方法-jsチュートリアル-php.cn

React のパフォーマンスを向上させる useTransition フックの使用方法

WBOY

リリース： 2024-08-22 18:40:05

オリジナル

932 人が閲覧しました

How to use the useTransition hook the improve performance in React

React は、ユーザーインターフェイスを構築するための人気のある JavaScript ライブラリです。効率性が高く、再利用可能な UI コンポーネントの作成に重点を置いていることで知られています。 React の重要な機能の 1 つは、React 状態にフックする関数であるフックの導入です。これらのフックの 1 つは 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 フックは 2 つの値を返します。pending の値は、タスクが実行された場合に true になります。また、startTransition 関数には、より緊急のタスクによって中断される可能性のあるタスクが含まれています。

上記の例では、startTransition 関数内の非同期アロー関数内でフェッチリクエストをラップしました。

ボタンでは、保留にリンクされている無効な属性を含むように変更し、タスクが保留中の場合はスピナーを表示し、タスクが保留中の場合は「投稿を取得」というラベルを表示するようにボタンのラベルを変更しました。タスクは保留中ではありません。

これにより、スムーズなユーザーエクスペリエンスが実現し、パフォーマンスが向上し、ユーザーの不正行為からアプリケーションを保護します。

結論

useTransition フックは、スムーズなユーザーエクスペリエンスを備えたパフォーマンスの高い React アプリケーションを構築するための革新的なツールです。これにより、動作が遅くなる可能性がある場合でも UI の応答性が維持され、UI のフリーズが防止され、全体的なユーザーエクスペリエンスが向上します。

以上がReact のパフォーマンスを向上させる useTransition フックの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。