React hooklari nima?

Hooklar funksiyalarga sinflardan foydalanmasdan holat va boshqa React xususiyatlariga kirish imkonini beradi.

Ular props, holat, kontekst, murojaatlar va lifecycle (hayotiy sikl) kabi React tushunchalarini to‘g‘ridan-to‘g‘ri API bilan ta’minlaydi.

Hook nima?

Hooklar - bu funktsional componentlardan React holati va lifecycle imkoniyatlariga "ulanish" imkonini beruvchi funksiyalardir.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

Hook’larni react’dan import qilishingiz shart.

Bu yerda biz dastur holatini kuzatish uchun useState Hook-dan foydalanamiz.

State odatda kuzatilishi kerak bo‘lgan ilova ma’lumotlari yoki xususiyatlariga ishora qiladi.

Hook qoidalari

Hooklar uchun 3 ta qoida mavjud:

• Hooklar faqat React funksiyasi componentlari ichida chaqirilishi mumkin.
• Hooklar faqat componentning yuqori darajasida chaqirilishi mumkin.
• Hooklar shartli bo‘lishi mumkin emas

Maxsus hooklar

Agar sizda bir nechta componentlarda qayta ishlatilishi kerak bo‘lgan statistik mantiq bo‘lsa, siz o‘zingizning shaxsiy hooklaringizni yaratishingiz mumkin.

Biz maxsus hooklar bo‘limida batafsilroq to‘xtalamiz.