Yangilanishlarni rejalashtirish va kechiktirish

React’da yangilanishlarni rejalashtirish va kechiktirish imkoniyati ilovaning javob berish qobiliyatini saqlab qolish uchun juda muhimdir. Fiber reconciler bu funksiyani rejalashtiruvchi(scheduler) va samarali API’lar orqali ta’minlaydi. Ushbu API’lar React’ga bo’sh vaqtlarida ish bajarish va yangilanishlarni eng qulay paytlarda rejalashtirish imkonini beradi.

Rejalashtiruvchini keyingi bo’limlarda batafsil o’rganamiz, ammo hozircha uni quyidagicha tushunib olishingiz mumkin: yangilanishlarni qabul qiladigan va “bu ishni hozir qil,” yoki “bu ishni keyin qil” deb aytadigan tizimdir. Bu tizim setTimeout, Message Channel kabi brauzer API’lariga tayanadi.

Real vaqtli chat ilovasi misoli

Real vaqtli chat ilovasini ko’rib chiqamiz, unda foydalanuvchilar xabarlar yuborishi va qabul qilishi mumkin. Chat komponenti xabarlar ro’yxatini ko’rsatadi, va xabarlarni kiritish(input) komponenti foydalanuvchilarga xabar yozish va jo’natish imkonini beradi. Shuningdek, chat ilovasi serverdan real vaqt rejimida yangi xabarlarni qabul qiladi. Bu vaziyatda foydalanuvchi bilan o’zaro aloqani (xabar yozish va jo’natish) ustuvor qilish orqali foydalanuvchi bilan ishlash qulayligini yaxshilashini xohlaymiz, shuningdek kiruvchi xabarlar UI’ni blok qilmasdan, samarali tarzda render qilishni ta’minlashni istaymiz.

Misolni aniqroq qilish uchun, avvalo xabarlar ro’yxati komponentini yaratamiz:

const MessageList = ({ messages }) => (
  <ul>
    {messages.map((message, index) => (
      <li key={index}>{message}</li>
    ))}
  </ul>
);

Keyin, foydalanuvchilarga xabar yozish va jo’natish imkonini beruvchi xabar kiritish komponentini yarataylik:

const MessageInput = ({ onSubmit }) => {
  const [message, setMessage] = useState("");
 
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(message);
    setMessage("");
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit">Yuborish</button>
    </form>
  );
};

Nihoyat, ikkala komponentni birlashtiruvchi va xabarlarni yuborish va qabul qilish logikasini boshqaruvchi chat komponentini yaratamiz:

const ChatApp = () => {
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    // Server bilan bog'lanish va kiruvchi xabarlarga obuna bo'lish
    const socket = new WebSocket("wss://your-websocket-server.com");
    socket.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };
 
    return () => {
      socket.close();
    };
  }, []);
 
  const sendMessage = (message) => {
    // Xabarni serverga yuborish
  };
 
  return (
    <div>
      <MessageList messages={messages} />
      <MessageInput onSubmit={sendMessage} />
    </div>
  );
};

Ushbu misolda React’ning concurrent render qilish qobiliyatlari xabarlar ro’yxatini va foydalanuvchi bilan o’zaro interaktivlikni samarali boshqaradi. Foydalanuvchi xabar yozayotganida yoki yuborayotganida, React tekst kiritish yangilanishlarini boshqa yangilanishlardan ustuvor deb hisoblab, qulay va silliq foydalanuvchi bilan ishlash qulayligini ta’minlaydi.

Yangi xabarlarni pastroq ustuvorlikda render qilish

Serverdan yangi xabarlar kelganida va ular render qilinishi kerak bo’lganida, ular odatiy yoki noma’lum render yo’li(render lane)da render qilinadi. Bu, DOM’ni sinxron va bir zumda bloklovchi tarzda yangilaydi, bu esa foydalanuvchi kiritishlarini kechiktiradi. Agar yangi xabarlar ro’yxatini render qilishni pastroq ustuvorlikka o’tkazmoqchi bo’lsak, tegishli state yangilanishini useTransition hook’idan startTransition funksiyasi orqali o’rab ishlatishimiz mumkin. Quyidagi kabi:

const ChatApp = () => {
  const [messages, setMessages] = useState([]);
  const [isPending, startTransition] = useTransition();
 
  useEffect(() => {
    // Serverga ulanish va kiruvchi xabarlarga obuna bo'lish
    const socket = new WebSocket("wss://your-websocket-server.com");
    socket.onmessage = (event) => {
      startTransition(() => {
        setMessages((prevMessages) => [...prevMessages, event.data]);
      });
    };
 
    return () => {
      socket.close();
    };
  }, []);
 
  const sendMessage = (message) => {
    // Xabarni serverga yuborish
  };
 
  return (
    <div>
      <MessageList messages={messages} />
      <MessageInput onSubmit={sendMessage} />
    </div>
  );
};

Bu bilan, React’ga xabarlar ro’yxati yangilanishlarini pastroq ustuvorlikda rejalashtirish va ularni UI’ni bloklamasdan render qilishligi haqida signal beramiz. Bu chat ilovasining katta yuklama ostida ham samarali ishlashiga imkon beradi, foydalanuvchi kiritishlari hech qachon to’xtatilmaydi va kiruvchi xabarlar foydalanuvchi bilan o’zaro interaktivlikda kamroq ahamiyatli bo’lganligi sababli pastroq ustuvorlikda render qilinadi.

Ushbu misol, React’ning concurrent render qilish qobiliyatlarini murakkab o’zaro ta’sirlar va tez-tez yangilanishlarni ishlash samaradorligi yoki foydalanuvchi bilan ishlash qulayligidan voz kechmasdan qanday boshqarish mumkinligini ko’rsatadi. Keyingi bo’limda useTransition hook’ini yanada chuqurroq o’rganamiz. Hozir esa React yangilanishlarni qanday rejalashtirishini yanada chuqurroq ko’rib chiqamiz.

Chuqurroq o’rganish

React’da yangilanishlarni rejalashtirish, ustuvorlikni belgilash va kechiktirish jarayoni foydalanuvchi interfeysining javob qaytaruvchanligini saqlab qolish uchun muhimdir. Bu jarayon yuqori ustuvorlikdagi vazifalarni tezda hal qilishga imkon beradi, past ustuvorlikdagi vazifalar esa kechiktirilishi mumkin, bu esa UI’ning katta yuklama ostida ham silliq ishlashini ta’minlaydi. Bu mavzuni chuqurroq o’rganish uchun bir nechta asosiy tushunchalarni ko’rib chiqamiz: rejalashtiruvchi (scheduler), vazifalarning ustuvorlik darajalari (priority levels of tasks) va yangilanishlarni kechiktirish (defer updates) mexanizmlari.

Fiber’ga qayta tashrif Scheduler