Cara menggunakan useTransition hook meningkatkan prestasi dalam React

React ialah perpustakaan JavaScript yang popular untuk membina antara muka pengguna. Ia terkenal dengan kecekapan dan tumpuan untuk mencipta komponen UI boleh guna semula. salah satu ciri utama dalam React ialah pengenalan cangkuk yang merupakan fungsi yang menghubungkan ke dalam keadaan React. pada cangkuk tersebut ialah cangkuk useTransition. Cangkuk ini membolehkan perubahan keadaan berlaku tanpa menyekat antara muka yang menghasilkan pengalaman yang lancar.

Memahami penggunaan Cangkuk peralihan

Untuk memahami penggunaan Transition hook dengan lebih baik, kita akan melihat contoh berikut.

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; 

apabila penggunaan klik butang bergantung pada kelajuan internet atau seberapa berat tugasan yang dilaksanakan di dalam fungsi fetchData, UI mungkin membeku semasa tugasan pengambilan yang akan mengakibatkan pengalaman pengguna yang lemah. juga terdapat kemungkinan pengguna menghantar spam pada butang sekiranya anda tidak mahu pengguna menyalahgunakan aplikasi anda. Aplikasi itu juga tidak menunjukkan kepada pengguna sebarang petunjuk bahawa mereka adalah operasi dalam proses.

Isu tersebut boleh diselesaikan dengan mudah menggunakan cangkuk useTransition yang kita boleh mengemas kini kod sebelumnya kepada sesuatu seperti ini.

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; 

Cangkuk useTransition yang digunakan mengembalikan dua nilai: menunggu nilai yang akan menjadi benar jika tugasan telah dilaksanakan dan fungsi startTransition mengandungi tugas yang saya akan diganggu oleh tugasan yang lebih mendesak.

Dalam contoh di atas kami membungkus permintaan pengambilan di sisi fungsi anak panah tak segerak yang berada di dalam fungsi startTransition.

dan dalam butang kami mengubah suainya dengan cara yang termasuk atribut yang dilumpuhkan yang dipautkan kepada belum selesai dan kami menukar label butang untuk menunjukkan pemutar apabila tugas belum selesai dan menunjukkan label "Dapatkan siaran" apabila tugas belum selesai.

Ini menghasilkan pengalaman pengguna yang lancar dan memberikan prestasi yang lebih baik serta melindungi aplikasi anda daripada salah laku pengguna.

Kesimpulan

Kait useTransition ialah pengubah permainan untuk membina aplikasi React yang berprestasi dengan pengalaman pengguna yang lancar. Ia memastikan UI kekal responsif semasa operasi yang berpotensi perlahan dan menghalang pembekuan UI yang meningkatkan pengalaman pengguna secara keseluruhan.

Atas ialah kandungan terperinci Cara menggunakan useTransition hook meningkatkan prestasi dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!