Komponent State-i

setState nə edir?

Komponentin state obyektinin yenilənməsi əməliyyatını planlamaq üçün setState() funksiyasında istifadə edilir. Komponent, yeni state dəyişikliklərini yenidən render etmə ilə cavablandırır.

state və props arasında fərq nedir?

props (ingilicə, “properties” sözünün qısa forması — parametrlər) və state sadə JavaScript obyektləridir. Bu obyektlər render nəticəsinə təsir edən məlumatlardan ibarətdir. props obyekti komponentə göndərilir (funksiya arqumentləri kimi), state isə komponent daxilində baş verir (funksiya daxilində olan dəyişənlər kimi).

props və state haqqında əlavə məlumat üçün aşağıdakı resurslara baxın:

• Props və ya State
• ReactJS: Props və ya State

Niyə setState mənə yanlış dəyər qaytarır?

React dünyasında this.props və this.state obyektləri render olunmuş (ekranda görününən) dəyərləri təmsil edir.

setState çağırışlarının asinxron olduğundan setState çağırışından dərhal sonra this.state obyekti düzgün dəyər göstərməyəcək. Cari state dəyəri əsasında yeni state dəyərini hesablamaq lazımdırsa, setState funksiyasına obyekt əvəzinə yeniləmə funksiyası göndərin.

Aşağıdakı kod istədiyiniz kimi işləməyəcək:

incrementCount() {
  // Qeyd: bu nəzərdə tutulduğu kimi *işləməyəcək*.
  this.setState({count: this.state.count + 1});
}

handleSomething() {
  // Fərz edək ki, `this.state.count` dəyəri 0 ilə başlayır.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
  // Komponent yenidən render edildikdə `this.state.count` state dəyəri 3-ə yox, 1-ə bərabər olacaq.

  // Burada `incrementCount()` funksiyası `this.state.count` dəyərini çağırır.
  // React isə komponent yenidən render edilənə kimi `this.state.count` dəyərini yeniləmir.
  // Bu səbəbdən `incrementCount()` funksiyası hər zaman `this.state.count` dəyərini 0 kimi görür və yeni state-ə 1 dəyərini təyin edir.

  // Düzəliş aşağıda göstərilib!
}

Bu problemi düzəltmək üçün aşağıdakı bölmələrə baxın.

Cari state dəyəri əsasında yeni state-i necə yeniləyə bilərəm?

setState funksiyasına obyekt əvəzinə funksiya göndərərək cari dəyərin hər zaman ən yeni dəyər olduğunu siğortalamaq mümkündür (aşağıya baxın).

setState-ə obyekt və funksiya göndərmək arasında olan fərq nədir?

Yeniləmə funksiyası göndərildikdə cari state-in funksiya daxilindən istifadəsi mümkün olur. setState çağırışları dəstələndiyindən yeniləmə funksiyaları yenilikləri bir-birinin üzərindən zəncirləyərək konfliktsiz işləməsinə imkan yaradır:

incrementCount() {
  this.setState((state) => {
    // Vacib: yeniləmə zamanı cari state üçün `this.state` əvəzinə `state` obyektindən istifadə edin.
    return {count: state.count + 1}
  });
}

handleSomething() {
  // Fərz edək ki, `this.state.count` dəyəri 0 ilə başlayır.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // Bu çağırışdan `this.state.count` dəyərini oxuduqda 0 veriləcək.
  // Lakin, React komponenti yenidən render etdikdə, yeni dəyər 3 olacaq.
}

setState haqqında buradan oxuyun

setState nə zaman asinxrondur?

Hal hazırda, setState, hadisə işləyiciləri daxilində asinxron baş verir.

Nümunə: Tıklamaq hadisəsi zamanı Parent və Child komponentləri setState çağırdıqda Child-ın iki dəfə render edilməməsi üçün setState-in asinxron olması vacibdir. Bunun yerinə, React, brauzer hadisəsinin sonunda state yeniliklərini “təmizləyir”. Bu, böyük applikasiyalarda vacib performans qazancına səbəb olur.

Bunun tətbiq detalı olduğundan bu qanuna etibar etməyin. Gələcək versiyalarda yeniliklər daha çox ssenarilərdə dəstələnəcək.

Niyə this.state dəyəri sinxron yenilənmir?

Əvvəlki bölmədə izah edildiyi kimi, yenidən render etmək əməliyyatı bütün komponentlərin hadisə işləyicilərindən setState-lər çağırıldıqdan sonra başlayır. Bu, lazımsız render etmələrin qabağını alaraq performans qazancına səbəb olur.

Lakin, React-in niyə this.state-i render etmədən yeniləmədiyi sizi maraqlandıra bilər.

Bunun iki səbəbi var:

• Bu, props və state arasında olan ardıcıllığı pozaraq debaq etməni çətinləşdirə bilər.
• Bu, bəzi yeni xüsusiyyətlərin tətbiqinin qeyri-mümkün olmasına səbəb ola bilər.

Xüsusi nümunələr üçün bu GitHub şərhini oxuyun.

Redux və MobX kimi state idarə edən kitabxana istifadə etmək lazımdır?

Lazım ola bilər.

Yeni kitabxanalardan istifadə etmədən öncə React-i yaxşı bilmək daha vacibdir. Yalnız React-dən istifadə edərək mürəkkəb applikasiyalar düzəltmək mümkündür.