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.

stateprops 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).

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

setState niyə yanlış dəyər qaytarır?

React dünyasında this.propsthis.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ğıda 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) => {
    // Vacıb: 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ı ParentChild komponentləri setState çağırdıqda Child-ın iki dəfə render edilməməsi üçün setState-in asinxron olması vacibdir. Əvəzinə, React, brauzer hadisəsinin sonunda state yeniliklərini “təmizləyir”. Bu, böyük applikasiyalarda böyük 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, yenideə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 this.state-i render etmədən yeniləmədiyi sizi maraqlandıra bilər.

Bunun iki səbəbi var:

  • Bu, propsstate 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.