useTransition

useTransition — bu kuchli React hook’i bo’lib, komponentlaringizda state yangilanishlarining ustuvorligini boshqarishga va yuqori ustuvorlikdagi yangilanishlar tufayli UI’ning javob beruvchanligini yo’qotmaslikka yordam beradi. Bu ayniqsa yangi ma’lumotlarni yuklash yoki sahifalar o’rtasida navigatsiya qilish kabi vizual tarzda buzilishi mumkin bo’ladigan yangilanishlarda foydali hisoblanadi.

useTransition orqali qaytarilgan startTransition funksiyasiga o’ralgan har qanday yangilanishni “transition lane”ga (biz ilgari ko’rganimizdek, Sync yo’lidan pastroq ustuvorlik darajasiga) o’tkazadi. Bu sizga yangilanishlarning vaqtini boshqarish va yuqori ustuvorlikdagi boshqa yangilanishlar asosiy thread uchun raqobat qilayotgan bo’lsa ham, silliq foydalanuvchi bilan ishlash qulayligini ta’minlash imkonini beradi.

useTransition tarkibi

useTransition hook bo’lgani uchun uni faqatgina funksional komponentlar ichida ishlatishingiz mumkin. Bu ikkita elementdan iborat massivni qaytaradi:

isPending: Bu o’zgaruvchi boolean qiymat bo’lib, o’tish (transition) jarayoni davom etayotganligini bildiradi. useTransitionning ishlashidagi qiziqarli jihat shundaki, startTransition chaqirilganda birinchi qiladigan ish bu sinxron setState({ isPending: false })ni o’rnatish uchun bajarish. Shu sababli, isPendingga bog’liq yangilanishlar tezkor bo’lishi kerak, aks holda useTransitiondan foydalanish maqsadini yo’qotadi.
startTransition: Pastroq ustuvorlikda bo’lishi yoki kechiktirilishi kerak bo’lgan yangilanishlarni o’rash uchun foydalaniladigan funksiya.

`startTransition` API

Bu yerda, startTransition API ham mavjudligini eslatib o’tish o’rinli, bu hook emas, balki oddiy funksiya sifatida mavjud. Shoshilinch bo’lmagan transition’ni boshlashning ikkinchi usuli bu React’dan bevosita import qilinadigan startTransition funksiyasidan foydalanishdir. Bu usul bizga isPending bayrog’idan foydalanish imkonini bermaydi, lekin u hook kabi foydalanib bo’lmaydigan kod qismlarida, masalan useTransition hook’idan chaqirish kabi, pastroq ustuvorlikdagi yangilanishni React’ga bildirmoqchi bo’lgan holatlarda mavjud.

Sodda misol

Quyida, useTransitiondan foydalanishni ko’rsatuvchi sodda misolni ko’rib chiqamiz:

import React, { useState, useTransition } from "react";
 
function App() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();
 
  const handleClick = () => {
    doSomethingImportant();
    startTransition(() => {
      setCount(count + 1);
    });
  };
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
      {isPending && <p>Loading...</p>}
    </div>
  );
}
 
export default App;

Ushbu misolda, biz useTransitiondan foydalanib hisoblagichni oshiruvchi state yangilanishining ustuvorligini boshqaryapmiz. setCount yangilanishini startTransition funksiyasi ichiga o’rab, biz React’ga bu yangilanishni kechiktirish mumkinligini bildiryapmiz. Shu orqali, agar boshqa yuqori ustuvorlikdagi yangilanishlar sodir bo’lsa ham, UI javob bermay qolmasligi ta’minlanadi.

Murakkab misol: Navigatsiya

useTransition sahifalar orasida o’tishda ham foydali. Navigatsiya bilan bog’liq yangilanishlarning ustuvorligini boshqarish orqali foydalanuvchi bilan ishlash qulayligini silliq va tezkor saqlash mumkin, hatto murakkab sahifa o’tishlarida ham.

Ushbu misolda useTransition yordamida bir sahifali ilovada (SPA) sahifa o’tishlarini qanday boshqarish mumkinligini ko’rib chiqamiz:

import React, { useState, useTransition } from "react";
 
const PageOne = () => <div>Page One</div>;
const PageTwo = () => <div>Page Two</div>;
 
function App() {
  const [currentPage, setCurrentPage] = useState("pageOne");
  const [isPending, startTransition] = useTransition();
 
  const handleNavigation = (page) => {
    startTransition(() => {
      setCurrentPage(page);
    });
  };
 
  const renderPage = () => {
    switch (currentPage) {
      case "pageOne":
        return <PageOne />;
      case "pageTwo":
        return <PageTwo />;
      default:
        return <div>Unknown page</div>;
    }
  };
 
  return (
    <div>
      <nav>
        <button onClick={() => handleNavigation("pageOne")}>Page One</button>
        <button onClick={() => handleNavigation("pageTwo")}>Page Two</button>
      </nav>
      {isPending && <p>Loading...</p>}
      {renderPage()}
    </div>
  );
}
 
export default App;

Ushbu misolda, bizning SPA’dagi turli sahifalarni ifodalovchi ikkita oddiy komponent mavjud. Biz useTransition’dan foydalanib joriy sahifani o’zgartiruvchi state yangilanishini o’rab qo’yamiz, bu sahifa o’tishini boshqa yuqori ustuvor yangilanishlar (masalan, foydalanuvchi kiritadigan input ma’lumotlar) sodir bo’layotgan paytda kechiktiradi.

Bu misolda shunday savol tug’ilishi mumkin: “To’xtang, sahifa o’tishi foydalanuvchi bosganidan keyin darhol amalga oshishi kerak emasmi?” Ha, siz to’g’ri fikr qilasiz; ammo, agar keyingi sahifa Suspense yordamida biror ma’lumotni yuklashni talab qilsa, unda sahifa o’tishi kechikishi mumkin. Bu yerda useTransition yordam beradi, chunki u navigatsiyaga tegishli yangilanishlarning ustuvorligini boshqarishga imkon beradi, murakkab sahifa o’tishlarida ham foydalanuvchi bilan ishlash qulayligi silliq va javob beruvchi bo’lishini ta’minlaydi.

E’tiborga olish kerakki, agar keyingi sahifa ma’lumotni effekt (masalan useEffect bilan) orqali yuklashni talab qilsa, startTransition ushbu ma’lumotning yuklanishini kutmaydi; ammo, transition ichida kechiktirilganda, React isPending state’ini ma’lumotni yuklash va qaytgandan so’ng uni ko’rsatishga bog’laydi.

Ushbu holatda, sahifa o’tish jarayonida isPending state’i true bo’lib qoladi, bu foydalanuvchi tugmani bosishiga javoban darhol yuklanish indikatorini ko’rsatishga imkon beradi. O’tish yakunlangandan so’ng, isPending state’i false bo’ladi va yangi sahifa ko’rsatiladi.

Chuqurroq tahlil qilish

Reactning Fiber arxitekturasi, React rejalashtiruvchisi(scheduler), ustuvorlik darajalari va render yo’l(lane)lari mexanizmi bo’yicha asosiy bilimga ega bo’lib, endi useTransition hook’ining ichki ishlash mexanizmini chuqurroq o’rganishimiz mumkin.

useTransition hook’i o’tish (transition) yaratish va o’sha transition ichidagi yangilanishlarga maxsus ustuvorlik darajasini tayinlash orqali ishlaydi. Biror yangilanish transition ichiga joylashtirilganda, React yangilanishni belgilangan ustuvorlik darajasi asosida rejalashtirish va render qilishni ta’minlaydi.

Mana useTransition hook’idan foydalanishda bajariladigan qadamlar umumiy ko’rinishi:

Funksional komponent ichida useTransition hook’ini import qilish va chaqirish.
Ushbu hook ikki elementdan iborat massivni qaytaradi: birinchisi isPending state’i, ikkinchisi esa startTransition funksiyasi.
Vaqtni nazorat qilmoqchi bo’lgan har qanday state yangilanishi yoki komponent render qilishini o’rash uchun startTransition funksiyasidan foydalaning.
isPending state’i transition jarayoni hali tugallanmagan yoki tugallanganligini ko’rsatadi.
React transition’ga o’ralgan yangilanishlarni tegishli ustuvorlik darajasi bilan ishlov berishini ta’minlaydi. Bu yangilanishlarni tayinlash va boshqarish uchun jadval va render yo’llari mexanizmidan foydalanish orqali amalga oshiriladi.

useTransitiondan foydalanish orqali biz yangilanishlarning vaqtini samarali boshqara olamiz va yuqori ustuvorlikka ega yangilanishlar asosiy thread uchun raqobat qilayotganida ham silliq foydalanuvchi bilan ishlash qulayligini saqlashimiz mumkin.

Render yo'llari useDeferredValue