React Hooks

React Hooks

Hooks React-ga 16.8-versiyada qo'shildi.

Hooks funktsiya komponentlariga holat va boshqa React xususiyatlariga kirishni taqdim etadi. Shuning uchun, klass komponentlarga ehtiyoj kamroq bo'ldi.

Garchi Hooks klass komponentlarni almashtirsa-da, React-dan klasslarni olib tashlash rejalashtirilmagan.

Hook nima?

Hooks bizga React xususiyatlariga, masalan holat (state) va lifecycle metodlariga "bog'lanish" imkonini beradi.

Misol:

Quyida Hook misoli keltirilgan. Agar bu sizga tushunarsiz bo'lsa, xavotir olmang. Keyingi bo'limda batafsilroq tushuntiriladi.

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function FavoriteColor() {
  const [color, setColor] = useState('red');
 
  return (
    <>
      <h1>Sevimli rangim {color}!</h1>
      <button type="button" onClick={() => setColor('blue')}>
        Moviy
      </button>
      <button type="button" onClick={() => setColor('red')}>
        Qizil
      </button>
      <button type="button" onClick={() => setColor('pink')}>
        Pushti
      </button>
      <button type="button" onClick={() => setColor('green')}>
        Yashil
      </button>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

Hooks-larni React-dan import qilish kerak.

Bu yerda useState Hook-ni qo'llayapmiz, bu ilovaning holatini kuzatish uchun ishlatiladi.

Holat (state) odatda ilova ma'lumotlari yoki kuzatish zarur bo'lgan xususiyatlarga ishora qiladi.

Hook Qoidalari

Hooks uchun 3 ta qoida mavjud:

1. Hooks faqat React funktsiya komponentlari ichida chaqirilishi mumkin.
2. Hooks faqat komponentning yuqori darajasida chaqirilishi kerak.
3. Hooks shartli bo'lishi mumkin emas.

Maxsus Hooks

Agar bir necha komponentlarda qayta foydalanilishi kerak bo'lgan holatli (stateful) mantiq mavjud bo'lsa, siz o'zingizning maxsus Hooks-ni yaratishingiz mumkin.

Maxsus Hooks haqida batafsilroq ma'lumotni "Custom Hooks" bo'limida ko'rib chiqamiz.