Uzun zamandır beklenen React v18 nihayet birkaç ay önce piyasaya sürüldü. Büyük bir değişiklik olmamasına rağmen, göz atmaya değer bazı ilginç özellikler eklendi. Bu makalede bazı yeni eklemeler ve React v18'e nasıl yükseltileceği anlatılacaktır.

React 18'e Nasıl Yükseltilir

React'in en son sürümünü yüklemek için bu komutu bir terminalde çalıştırın:

npm Yüklemek tepki tepki-dom

Veya iplik kullanıyorsanız:

iplik ekle tepki-dom

En son sürümü yükledikten sonra, yeni özelliklerinden yararlanmaya başlayabilirsiniz.

React 18'de birkaç ekleme var; İşte en dikkat çekici olanlardan dördü.

1. Sıkı Mod

StrictMode, bir uygulamadaki olası sorunları vurgulamak için kullanabileceğiniz bir özelliktir. Sıkı mod kontrolleri yalnızca geliştirme modunda çalışır ve üretim yapısını etkilemez. Ancak, kodunuzdaki olası sorunları belirlemede çok yararlı olabilirler.

Uygulamanızın herhangi bir bölümü için katı modu etkinleştirebilirsiniz. Örneğin, tüm bileşenleriniz için veya yalnızca bazıları için etkinleştirebilirsiniz.

instagram viewer 
içe aktarmak Tepki itibaren 'tepki';
işlevDemoÖrnek() {
dönüş (
<div>
<İlk Bileşen />
<Tepki. KatıMod>
<İkinci Bileşen />
<Üçüncü Bileşen />
</React.StrictMode>
<Dördüncü Bileşen />
</div>
 );
}

Yukarıdaki kodda, dört bileşenin tümü olası sorunlar için kontrol edilecektir. Ancak, katı mod kontrolleri yalnızca ve .

StrictMode ayrıca aşağıdakiler gibi başka şekillerde de yardımcı olur:

  • Güvenli olmayan yaşam döngülerine sahip bileşenleri belirleme: Bir bileşenin güvenli olmayan olarak işaretlenmiş bir yaşam döngüsü yöntemi varsa, katı mod sizi bu konuda uyarır.
  • Eski dize ref API kullanımı hakkında uyarı: Eski dize ref API'sini kullanıyorsanız katı mod, kullanımı hakkında sizi uyarır.
  • Kullanımdan kaldırılan findDOMNode kullanımı hakkında uyarı: Kullanımdan kaldırılmış findDOMNode API'sini kullanıyorsanız, katı mod sizi bu konuda uyaracaktır.
  • Beklenmeyen yan etkilerin tespiti: Bir bileşen beklenmedik yerlerde yan etkileri (setState gibi) tetikliyorsa, katı mod sizi bu konuda uyarır.
  • Eski bağlam API'sini algılama: Eski bağlam API'sini kullanıyorsanız (artık kullanımdan kaldırılmıştır), katı mod sizi bu konuda uyaracaktır.
  • Yeniden kullanılabilir durumun sağlanması: Birden çok bileşen tarafından kullanılan bir durumunuz varsa, katı mod, doğru şekilde senkronize edilmesini sağlamaya yardımcı olur.

Genel olarak, katı mod, kodunuzdaki olası sorunları belirlemeye yardımcı olmak için geliştirme aşamasında yararlı bir özellik olabilir.

2. geçişler

Geçişler, belirli UI güncellemelerini acil olmayan olarak işaretlemenize olanak tanır. Bu, React'in daha önemli olan diğer güncellemelere öncelik verebileceği anlamına gelir.

Örneğin, biri arama sorgusu, diğeri de sonuçları için olmak üzere iki metin alanınız varsa, arama sonuçları metin alanını geçiş olarak işaretlemek istersiniz. Bu şekilde, React, kullanıcı arama sorgusu metin alanına her bir şey yazdığında bu metin alanını acilen yeniden oluşturması gerekmediğini bilir.

Bir UI güncellemesini geçiş olarak işaretlemek için startTransition işlevini kullanabilirsiniz. İşte bir örnek:

içe aktarmak { startTransition } itibaren 'tepki';
startTransition(() => {
// İçerideki acil olmayan durum güncellemelerini geçiş olarak işaretleyin
});

Bu kod, startTransition işlevi içindeki tüm durum güncellemelerini geçişler olarak işaretler. Bu şekilde, React diğer daha önemli UI güncellemelerine odaklanabilir.

3. Otomatik Dozajlama

React, bir durum değiştiğinde gerçekleşen yeniden oluşturma sayısını azaltan toplu işleme adı verilen yararlı bir özellik sunar. Bu, özellikle aşağıdaki durumlarda performansı optimize etmede çok yardımcı olabilir. asenkron kodla çalışma.

Önceden, bir sözünüz varsa veya bir ağ araması yapıyorsanız, durum güncellemeleri toplu olarak yapılmaz ve React'in birden çok kez yeniden oluşturması gerekirdi. Bununla birlikte, React 18'deki otomatik gruplama ile tüm durum güncellemeleri, vaatler, setTimeouts ve olay geri aramaları dahilinde bile gruplandırılır. Bu, React'in arka planda yapması gereken işi önemli ölçüde azaltır.

FlushSync işlevini kullanarak durum güncellemelerini manuel olarak toplu hale getirebilirsiniz, ancak React 18'den itibaren bu işlem artık otomatiktir. Bu, React yeniden oluşturmadan önce bir mikro görevin bitmesini bekleyeceğinden çok daha iyi performans sağlar.

4. Yeni Kancalar

Sürüm 18, birçok yeni Tepki kancalarıuseId, useTransition ve useDeferredValue dahil. Bu yeni Hook'lar, React uygulamalarınıza minimum çabayla ekstra işlevsellik eklemenin harika bir yolunu sunar.

React 18, Artırılmış Uygulama Performansı Sağlıyor

React 18 burada ve beraberinde web uygulaması performansında bazı büyük iyileştirmeler getiriyor. React'in yeni sürümüyle, daha hızlı yanıt veren ve genel olarak daha iyi performans gösteren web uygulamalarını kolayca oluşturabilirsiniz. Bu nedenle, sorunsuz çalışan ve harika görünen bir web uygulaması oluşturmak istiyorsanız React 18'e göz atmayı unutmayın.