ReactDərs 12 / 15

Funksional komponentlər və Hook-lar

Funksiya da vəziyyət saxlaya bilər

Funksiya komponenti props qəbul edib JSX qaytarır. Hook-lar state və sinxronlaşma kimi imkanları funksiyalarda istifadə etməyə imkan verir. useState dəyər və setter qaytarır; useEffect xarici sistemlə əlaqəni qurur.

import { useEffect, useState } from 'react';
export default function UserList({ url = '/examples/frontend/users.json' }) {
  const [users, setUsers] = useState([]);
  const [status, setStatus] = useState('loading');
  useEffect(() => {
    const controller = new AbortController();
    setStatus('loading');
    async function load() {
      try {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();
        if (!controller.signal.aborted) { setUsers(data); setStatus('ready'); }
      } catch {
        if (!controller.signal.aborted) setStatus('error');
      }
    }
    load();
    return () => controller.abort();
  }, [url]);
  if (status === 'loading') return <p>Yüklənir…</p>;
  if (status === 'error') return <p>Məlumat alınmadı.</p>;
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

Nümunə

Hook qaydaları

Hook-ları komponentin və ya özəl hook-un yuxarı səviyyəsində çağır; dövr, şərt və adi callback daxilində çağırma. Effect-in oxuduğu reaktiv dəyərlər asılılıqlarda olmalıdır. Effect callback-ini birbaşa async etmə: o, Promise deyil, lazım olduqda cleanup funksiyası qaytarmalıdır. Hesablanabilən filtr və cəmi state-də təkrarlamaq əvəzinə render zamanı hesabla.

Lokal məlumatı hazırlamaq

Ayrıca React təlim layihəsində public/examples/frontend/users.json faylını aşağıdakı məzmunla yarat. Dev server bu faylı /examples/frontend/users.json ünvanında təqdim edəcək; istifadə etdiyin başqa URL də eyni obyekt quruluşunu qaytarmalıdır.

[{"id":1,"name":"Aysel"},{"id":2,"name":"Murad"}]

Nümunə

Bu saytın özündə nümunə JSON artıq mövcuddur. Sorğunun səhifənin mənşəyinə görə göndərildiyini nəzərə al; başqa portda işləyən layihə bu faylı avtomatik paylaşmır.

Əlavə qeydlər və mənbələr

Funksiya komponenti props qəbul edib JSX qaytarır. useState yerli vəziyyəti saxlayır; useEffect xarici sistemlə sinxronlaşmanı qurur. Hook-ları şərt və dövr daxilində çağırma, effect asılılıqlarını və cleanup-ı düzgün saxla.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

Funksiya komponenti və useState
useEffect, asılılıqlar və cleanup
Hook çağırış qaydaları

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Köhnə sorğunu ləğv et

URL dəyişəndə əvvəlki işi təmizlə, sonra yeni nəticəni göstər.

Prosesi son vəziyyətə çatdır.

Birinci sorğu
URL dəyişdi
Əvvəlki iş dayandı
Yeni nəticə

Birinci sorğu

Effect ilk URL üçün işə düşüb.

fetch(urlA, { signal })

Bu məşq prosesi modelləşdirir.

Özün sına

Sinif sayğacını funksiya komponentinə çevir. Sonra taymer əlavə et və unmount zamanı intervalı təmizlə.

Nəticəni necə yoxlayım?

Funksiya komponentində state və effect işləyir; asılılıq dəyişəndə əvvəlki sorğu ləğv edilir və hook sırası sabitdir.

Gözlənilən nəticə

Sayğac kliklə, saniyə isə interval ilə artır.
Counter gizlədiləndə interval silinir; yenidən göstəriləndə yeni interval yaranır.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Sinifdəki state və lifecycle funksiyada useState/useEffect ilə əvəz edilir. Cleanup intervalı dayandırır.

App.jsx

import { useEffect, useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds(previous => previous + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <><button onClick={() => setCount(previous => previous + 1)}>Say: {count}</button><p>Keçən saniyə: {seconds}</p></>;
}
export default function App() {
  const [visible, setVisible] = useState(true);
  return <><button onClick={() => setVisible(value => !value)}>Göstər / gizlət</button>{visible && <Counter />}</>;
}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.