ReactDərs 5 / 15

Komponentin həyat dövrü

Xarici sistemlə əlaqəni idarə et

Komponentin qoşulması mount, çıxarılması unmount adlanır. Sinifdə componentDidMount məlumat yükləmək və abunəlik qurmaq, componentWillUnmount təmizləmək üçün istifadə oluna bilər. Funksiya komponentində belə sinxronlaşma Effect ilə ifadə olunur.

import { useEffect, useState } from 'react';
export default function WindowWidth() {
  const [width, setWidth] = useState(null);
  useEffect(() => {
    function update() { setWidth(window.innerWidth); }
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);
  return <p>{width === null ? 'Ölçülür…' : `En: ${width}px`}</p>;
}

Nümunə

Cleanup yalnız son çıxış deyil

Effect xarici sistemlə sinxronlaşma üçündür, bütün hesablamaları ora köçürmək üçün deyil. Asılılıqlar dəyişdikdə əvvəlki cleanup işləyə və effect yenidən qurula bilər. Boş asılılıq siyahısı burada heç bir reaktiv giriş oxunmadığına uyğundur.

Qlobal hadisə üçün eyni funksiya istinadını sil, intervalı clearInterval ilə dayandır, şəbəkə işini lazım olduqda AbortController ilə ləğv et. İnkişaf Strict Mode-da əlavə setup/cleanup dövrü səhv təmizləməni üzə çıxara bilər. Sinif metodları ilə effect arasında universal birəbir çevirmə fərz etmə.

Sinifdə eyni resursun təmizlənməsi

import { Component } from 'react';
export default class Clock extends Component {
  state = { seconds: 0 };
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState(previous => ({ seconds: previous.seconds + 1 }));
    }, 1000);
  }
  componentWillUnmount() { clearInterval(this.timer); }
  render() { return <p>{this.state.seconds}</p>; }
}

Nümunə

Props-a bağlı abunəlik dəyişəndə sinifdə yeniləmə mərhələsi də düşünülməlidir; yalnız mount/unmount cütü hər halı əhatə etmir. Funksiya nümunəsində düzgün asılılıqlar həmin sinxronlaşma sərhədini ifadə edir.

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

Komponentin qoşulması və çıxarılması xarici sistemlərlə əlaqəni başlatmaq və dayandırmaq üçün vacibdir. Sinif lifecycle metodlarını və useEffect ilə abunəlik və taymer təmizləməsini öyrən.

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

Mount və unmount
Qlobal hadisələr və məlumat yüklənməsi
Effect və cleanup

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Abunəliyin ömrünü idarə et

Komponenti qoş, hadisəni işlə və çıxaranda resursu təmizlə.

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

Komponent bağlıdır
Mount
Hadisə gəldi
Unmount və cleanup

Komponent bağlıdır

Hələ dinləyici yoxdur.

Bu məşq prosesi modelləşdirir.

Özün sına

Pəncərə enini göstərən komponent yaz. resize dinləyicisini əlavə et və komponent çıxarılanda eyni dinləyicini sil.

Nəticəni necə yoxlayım?

resize və taymer abunəliyi komponent çıxarılanda təmizlənir; təkrar montaj dinləyiciləri çoxaltmır.

Gözlənilən nəticə

En pəncərə ölçüsünə görə dəyişir; 800 rəqəmi yalnız görünüş nümunəsidir.
Komponent gizlədiləndə dinləyici cleanup ilə silinir.

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.

Eyni resize funksiyası əlavə və silinir. En yalnız effect daxilində brauzerdən oxunur; ilkin görünüş server və brauzer üçün eynidir.

App.jsx

import { useEffect, useState } from 'react';
function WindowWidth() {
  const [width, setWidth] = useState(null);
  useEffect(() => {
    function resize() { setWidth(window.innerWidth); }
    resize(); window.addEventListener('resize', resize);
    return () => window.removeEventListener('resize', resize);
  }, []);
  return <p>Pəncərə eni: {width ?? 'Yüklənir'}px</p>;
}
export default function App() {
  const [visible, setVisible] = useState(true);
  return <><button onClick={() => setVisible(value => !value)}>Göstər / gizlət</button>{visible && <WindowWidth />}</>;
}

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