Konkurrent Rejiminə Uyğunlaşma (Eksperimental)

• Quraşdırma

  • Bu Eksperimental Buraxılış Kimin Üçündür?
  • Konkurrent Rejimini Aktivləşdirmək

• Nəyi Gözləyin

  • Miqrasiya Addımı: Blok Rejimi
  • Niyə Bu Qədər Rejim Var?
  • Xüsusiyyətlərin Müqayisəsi

Quraşdırma

Konkurrent Rejimi yalnız React-in eksperimental qurulmalarında mövcuddur. Bunu yükləmək üçün aşağıdakı əmri icra edin:

npm install react@experimental react-dom@experimental

Eksperimental qurulmalarda semantik versiya siğortaları mövcud deyil.
Hər bir @experimental buraxılışda API-lar əlavə oluna bilər, dəyişə bilər, hətta silinə bilər.

Eksperimental buraxılışlarda pozucu dəyişikliklər tez-tez olur.

Bu qurulmaları şəxsi layihənizdə və ya fərqli budaqda sınaya bilərsiniz. Lakin, biz bu qurulmaları produksiyada işlətməyi tövsiyyə etmirik. Facebook-da bu qurulmalar produksiyada istifadə edilir. Lakin, baqlar baş verdikdə biz bu baqları düzəldirik. Sizə xəbərdarlıq edildi!

Bu Eksperimental Buraxılış Kimin Üçündür?

Bu buraxılış əsasən erkən yoxlayıcılar, kitabxana müəllifləri və maraqlanan insanlar üçündür.

Biz bu kodu produksiyada işlədirik (və bizim üçün işləyir), amma bu buraxılışda baqlar və catışmayan xüsusiyyətlər, buraxılışın sənədlərində isə boşluqlar var. Biz, Konkurrent Rejimində nəyin sındığını bilib bu xüsusiyyəti rəsmi stabil buraxılışına daha yaxşı hazırlamaq istəyirik.

Konkurrent Rejimini Aktivləşdirmək

Normalda, biz React-ə yeni xüsusiyyət əlavə etdikdə siz bu xüsusiyyəti dərhal işlədə bilirsiniz. Fraqmentlər, Kontekst və Hooklar belə xüsusiyyətlərin nümunələridir. Mövcud kodu dəyişmədən bu kodlardan istifadə etmək mümkündür.

Konkurrent Rejimi isə fərqlidir. Bu rejimdə React-in işləməsində semantik dəyişikliklər edilir. Əks halda, bu rejim ilə gələn yeni xüsusiyyətləri dəstəkləmək mümkün olmayacaqdı. Bu səbəbdən, buradakı xüsusiyyətləri ayrı-ayrı dərc etmək əvəzinə yeni “rejimin” altında qruplaşdırdıq.

Konkurrent Rejimini yalnız xüsusi alt ağacda aktivləşdirmək mümkün deyil. Əvəzinə, bu rejimi ReactDOM.render() funksiyasını çağırdığınız yerdən aktivləşdirməlisiniz.

Bu, Konkurrent Rejimini bütün <App /> ağacı üçün aktivləşdirəcək:

import ReactDOM from 'react-dom';

// Əvvəl aşağıdakı funksiya çağırışı olduğu yerdə:
//
// ReactDOM.render(<App />, document.getElementById('root'));
//
// Konkurrent Rejimini aşağıdakı funksiya ilə aktivləşdirə bilərsiniz:

ReactDOM.unstable_createRoot(
  document.getElementById('root')
).render(<App />);

Qeyd:

createRoot kimi Konkurrent Rejimi API-ları yalnız React-in eksperimental buraxılışlarında mövcuddur.

Konkurrent Rejimi aktiv olduqda əvvəl “təhlükəli” kimi işarələnmiş lifecycle metodları təhlükəli olub daha çox baqlara səbəb olurlar. Applikasiyanız Strikt Rejimi ilə işləmirsə, Konkurrent Rejimindən istifadə etməyi tövsiyyə etmirik.

Nəyi Gözləyin

Əgər sizin çoxlu 3-cü tərəfin paketlərindən istifadə edən böyük applikasiyanız varsa, bu applikasiyada Konkurrent Rejimindən dərhal istifadə edə biləcəyinizi gözləməyin. Məsələn, biz Facebook-un yeni səhifəsi üçün Konkurrent Rejimini aktivləşdirmişik, amma bu rejimi köhnə sayt üçün aktivləşdirməyi planlaşdırmırıq. Bunun səbəbi bizim köhnə səhifəmizdə “təhlükəli” lifecycle metodlarından, Konkurrent Rejimi ilə uyğun olmayan 3-cü tərəfin kitabxanalarından və həllərindən istifadə edilir.

Bizim təcrübəmiz göstərir ki, kənar state idarəsi həllərindən asılı olmayan və idiomatik React həllərindən istifadə edən kodları Konkurrent Rejimində icra etmək asandır. Biz, çox yaranan problemlər və bu problemlərin həlləri haqqında gələcək həftələrdə danışacağıq.

Miqrasiya Addımı: Blok Rejimi

Köhnə kodları Konkurrent Rejiminə keçirmək çox çətin ola bilər. Bu səbəbdən biz React-in eksperimental buraxılışlarında yeni “Blok Rejimini” də dəstəkləyirik. Bu rejimdən istifadə etmək üçün createRoot funksiyasını createBlockingRoot funksiyası ilə əvəz edin. Bu rejimdə Konkurrent Rejiminin yalnız kiçik hissəsi dəstəklənir, amma bu rejim React-in indiki işlədiyi vaxta daha yaxın olub yaxşı miqrasiya addımı kimi xidmət göstərir.

Xülasə:

• Köhnə Rejim: ReactDOM.render(<App />, rootNode). Bu, React applikasiyalarının bugünki işləmə rejimi ilə eynidir. Bu rejimi yaxın gələcəkdə silmək marağımız yoxdur. Lakin, bu rejim ilə yeni xüsusiyyətlər dəstəklənməyəcək.
• Blok Rejimi: ReactDOM.createBlockingRoot(rootNode).render(<App />). Bu eksperimental rejim Konkurrent Rejiminin kiçik hissəsindən istifadə etmək istəyənlər üçün ilkin miqrasiya addımı rolunu oynayır.
• Konkurrent Rejimi: ReactDOM.createRoot(rootNode).render(<App />). Bu rejim hələki eksperimentaldır. Gələcəkdə stabilləşdikdən sonra biz bunu React-in standart rejimi etmək istəyirik. Bu rejimdə React-in bütün xüsusiyyətləri dəstəklənəcək.

Niyə Bu Qədər Rejim Var?

Biz, böyük pozucu dəyişikliklər etmək əvəzinə tədrici miqrasiya strategiyasına üstünlük veririk.

Praktikada, biz bir çox Köhnə Rejimdə olan applikasiyaların ən azından Blok Rejiminə keçə bilməsini gözləyirik. Bu fraqmentasiya bütün rejimləri dəstəkləmək istəyən kitabxanalar üçün əsəbləşdirici ola bilər. Lakin, ekosistemi yavaş-yavaş Köhnə rejimdən uzaqlaşdırmaq ekosistemdə olan böyük kitabxanaların problemlərini də (məsələn, şablonu oxuduqda çaşdırıcı Suspense davranışları və stabil dəstələnmənin siğortalanmaması kimi) həll edəcək. Blok və Konkurrent Rejimlərində mövcud olmayan bəzi baqları Köhnə Rejimdə semantikanı dəyişmədən düzəltmək mümkün deyil.

Siz, Blok Rejiminin Konkurrent Rejiminin aşağı salınmış versiyası olduğunu fikirləşə bilərsiniz. Nəticədə, gələcəkdə bütün rejimlər birləşəcək və fərqli rejimlər haqqında fikirləşmək lazım olmayacaq. Lakin, indiki zamanda fərqli rejimlər ilə miqrasiya etmək asanlaşacaq.

Xüsusiyyətlərin Müqayisəsi

*: Köhnə Rejimdə React tərəfindən idarə olunan hadisələrin dəstələnməsi mümkündür. Lakin, bu yalnız bir brauzer tapşırığı ilə idarə oluna bilir. React olmayan hadisələr üçün unstable_batchedUpdates funksiyasından istifadə etmək lazımdır. Blok Rejimi və Konkurrent Rejimində isə bütün setState-lər dəstələnir.

**: Təkmilləşmə zamanı xəbərdarlıqlar göstəriləcək.