So verwenden Sie den useTransition-Hook, um die Leistung in React zu verbessern

React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es ist bekannt für seine Effizienz und seinen Fokus auf die Erstellung wiederverwendbarer UI-Komponenten. Eines der Hauptmerkmale von React ist die Einführung von Hooks, bei denen es sich um Funktionen handelt, die in den React-Status einbinden. Einer dieser Hooks ist der useTransition-Hook. Dieser Hook ermöglicht die Zustandsänderung, ohne die Schnittstelle zu blockieren, was zu einem reibungslosen Erlebnis führt.

Den useTransition-Hook verstehen

Um den useTransition-Hook besser zu verstehen, schauen wir uns das folgende Beispiel an.

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; 

Wenn Sie auf die Schaltfläche klicken, hängt es davon ab, wie langsam das Internet ist oder wie umfangreich die in der fetchData-Funktion ausgeführte Aufgabe ist. Die Benutzeroberfläche kann während der Abrufaufgabe einfrieren, was zu einer schlechten Benutzererfahrung führt. Es besteht auch die Möglichkeit, dass der Benutzer die Schaltfläche mit Spam überschwemmt, falls Sie nicht möchten, dass der Benutzer Ihre Anwendung missbraucht. Außerdem zeigt die Anwendung dem Benutzer keinen Hinweis darauf, dass ein Vorgang ausgeführt wird.

Diese Probleme können leicht mit dem useTransition-Hook behoben werden. Wir können den vorherigen Code in etwa so aktualisieren.

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; 

Der aufgerufene useTransition-Hook gibt zwei Werte zurück: pending, welcher Wert wahr ist, wenn die Aufgabe ausgeführt wird und die startTransition-Funktion die Aufgabe enthält, die durch dringendere Aufgaben unterbrochen werden kann.

Im obigen Beispiel haben wir die Abrufanforderung in eine asynchrone Pfeilfunktion eingebunden, die sich innerhalb der startTransition-Funktion befindet.

und in der Schaltfläche ändern wir sie so, dass sie ein deaktiviertes Attribut enthält, das mit „Ausstehend“ verknüpft ist, und wir haben die Beschriftung der Schaltfläche so geändert, dass ein Spinner angezeigt wird, wenn die Aufgabe aussteht, und die Beschriftung „Beitrag abrufen“, wenn die Aufgabe aussteht Aufgabe steht nicht aus.

Dies führt zu einer reibungslosen Benutzererfahrung, sorgt für eine bessere Leistung und schützt Ihre Anwendung vor Fehlverhalten der Benutzer.

Abschluss

Der useTransition-Hook ist ein Game-Changer für die Erstellung leistungsfähiger React-Anwendungen mit reibungsloser Benutzererfahrung. Dadurch wird sichergestellt, dass die Benutzeroberfläche auch bei möglicherweise langsamen Vorgängen reagiert und ein Einfrieren der Benutzeroberfläche verhindert wird, was die allgemeine Benutzererfahrung verbessert.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den useTransition-Hook, um die Leistung in React zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!