React ile kodlamayı denemeyi mi düşünüyorsunuz? İşte React 18'de denenecek önemli yeni özellikler.

React, Facebook tarafından 2013 yılında oluşturulan çok popüler bir açık kaynaklı JavaScript kitaplığıdır. Esnekliği sayesinde birçok geliştirici, hızlı, verimli ve yeniden kullanılabilir kullanıcı arabirimi (UI) bileşenleri oluşturmak için bazı özelliklerinden yararlanır.

Mart 2022'de ekip, uygulama performansını iyileştirmeye odaklanan yeni özellikler içeren React kitaplığının en yeni ve beklenen sürümü olan React 18'i piyasaya sürdü.

React 18'deki Yeni Özellikler

React 18, oyuna eklenen bazı kullanışlı yeni özelliklerden oluşur. açık kaynaklı JavaScript kitaplığı. Bu değişikliklerin çoğu önceki sürümde yoktu, diğer özellikler geliştirildi. Bu özelliklerden bazıları; yeni bir kök API, Otomatik Gruplandırma, Geçiş API'si, Askıya Alma API'sı ve yeni Kancaların piyasaya sürülmesi.

Yeni Kök API'sı

React'teki kök API, üst düzey bileşenin ağaçta nasıl işlendiğini takip eder. React'in önceki sürümlerinde, işlemek yöntemi, artık eski kök API olarak adlandırılan işlemeyi yürütmek için kullanıldı.

instagram viewer

Ancak, React 18, kullanarak bir kök oluşturan yeni bir kök API ile birlikte gelir. kök oluştur yöntemini kullanır ve ardından oluşturulan köke bir React bileşeni oluşturur. işlemek yöntem.

Bu yeni kök API, daha sonra tartışılacak olan geçiş API'si özelliği gibi bu son sürümdeki özelliklere erişmenizi sağlayacaktır. Eski yol, React 18'de çalışmaya devam edecek olsa da, gelecekte kullanımdan kaldırılabilir.

Aşağıdaki kod parçası, kök API'nin hem eski hem de yeni yollarla nasıl yapılandırıldığını gösterir.

Eski Kök API'sı

içe aktarmak ReactDOM itibaren"tepki-dom";
içe aktarmak Uygulama itibaren'./Uygulama';
ReactDOM.render(<Uygulama />, belge.getElementById('uygulama'))

Yeni Kök API'sı

içe aktarmak ReactDOM itibaren"react-dom/client";
içe aktarmak Uygulama itibaren'./Uygulama';
sabit kök = ReactDOM.createRoot(belge.getElementById('uygulama'));
root.render(<Uygulama />)

otomatik harmanlama

React'te gruplama, her tarayıcı olayında tek bir yeniden işlemede birden çok durum güncellemesini içerir; olayı tıklayın. Taahhüt veya geri arama gibi bir olayın dışında meydana gelen durum değişiklikleri gruplandırılmaz.

React 18 ile toplu durum güncellemeleri, bu güncellemelerin nerede gerçekleştiğine bakılmaksızın otomatik olarak yapılır. Bu özellik, performans ve oluşturma süresi üzerinde kullanıma hazır iyileştirme sağlar. Ancak, toplu iş yapılmasını istemediğiniz bir bileşen durumunuz varsa, bunu kullanarak devre dışı bırakabilirsiniz. yıkama senkronizasyonu yöntem. Aşağıda bunun nasıl yapılabileceğine dair örnek bir pasaj var;

içe aktarmak { FlushSync } itibaren"tepki-dom";
işlevkoluTıklayın() {
 FlushSync(() => {
 sayıyı ayarla(saymak => say + 1);
]});
 FlushSync(() => {
 setStore(mağaza => !mağaza);
});
}

Geçiş API'sı

React'te, kullanıcı arayüzünde yapılan güncellemeler acil ve acil olmayan güncellemeler olarak da adlandırılan geçiş güncellemeleri olarak kategorize edilebilir. Acil güncelleme örneği, bir alana metin girme durumu olabilirken, geçiş güncellemesi arama filtreleme işlevi olabilir.

Şimdi, bu tür güncellemeler aynı anda gerçekleşirse, bu ağır bir işlem olarak adlandırılabilir ve uygulamanızın donmasına neden olabilir. Bu sorunu çözmek için geçiş API'sinin çağırdığı yer burasıdır. Başlangıç ​​Geçişi oynamaya gelir Bu yeni özellik, React'e hangi güncellemelerin "geçiş" olarak işaretlenmesi gerektiğini söyleyerek kullanıcı etkileşimlerini iyileştirir. İşte nasıl çalıştığına dair bir kod örneği;

içe aktarmak { başlangıç ​​Geçişi } itibaren"tepki";
geçişe başla(() => {
 setSearch (giriş);
});

gerilim

Sunucuda bir uygulama oluşturulduğunda, tarayıcıya statik bir HTML dosyası döndürülerek kullanıcının JavaScript yüklenirken uygulamanın nasıl göründüğünü görmesi sağlanır. Dosya yüklendiğinde, HTML olarak bilinen şeyle dinamik hale gelir. hidrasyon. Buradaki eksiklik, tüm bunlar olmazsa uygulamanızın interaktif hale gelmemesidir.

Bu sorunu çözmek için React 18, iki yeni sunucu tarafı işleme (SSR) özelliği sağlar. gerilim bileşen;

  • Akışlı HTML, bir bileşenin parçalarının işlenirken gönderilmesine olanak tanır.
  • Seçici hidrasyon, bir kullanıcı tarafından seçilen bileşenlerin etkileşimine öncelik verir.

Yeni Kancalar

React için büyük bir dönüm noktası, React'te kancalar fonksiyon bileşenlerinin sınıf yazmadan durumlara ve diğer React özelliklerine erişmesine izin veren sürüm 16. React 18, geliştiricilerin deneyimini iyileştirmek için beş yeni kancayla birlikte gelir;

  • useId: Bu kanca, uygulamamızda hem sunucuda hem de istemcide benzersiz bir tanımlayıcı (ID) oluşturmamızı sağlar.
  • useTransition: Yanında kullanılır. Başlangıç ​​Geçişi acil olmayan olarak adlandırılabilecek yeni bir durum güncellemesi oluşturmak için.
  • useDefferedValue: Daha az acil olan güncellemelerin ertelenmesine izin verir.
  • useSyncExternalStore: Bu kanca, abonelikleri harici veri kaynaklarına uygularken kullanışlıdır.
  • useInsertionEffect: Bu kanca, stilleri DOM'a enjekte etmek için CSS-in-JS kitaplığı yazarlarıyla sınırlıdır.

React 18'e Nasıl Güncellenir?

Bir güncelleme gerçekleştirmek için terminalde aşağıdaki komutu çalıştırarak npm veya yarn paket yöneticisi kullanılabilir.

npm düzenlemek Tepki Tepki Tepki

veya

yarn add tepki tepki-dom

Ardından, üzerinde bir değişiklik yapmanız gerekecek index.js Daha önce gösterildiği gibi eski API'den yeni kök API'ye proje klasörünün kök dizinindeki dosya.

Yeni Bir React 18 Projesi Nasıl Kurulur

Yeni bir React 18 projesi kurmak için, terminalde npm veya yarn ile create-react-app paketi kurulur;

npx yaratmak-tepki-uygulama benim-tepki-uygulamam

veya

iplik eklemek yaratmak-tepki-uygulama benim-tepki-uygulamam

React 18 ile Uygulama Performansınızı Artırın

Artık React 18'deki yeni kök API, Suspense, Transition veya Automatic Batching gibi bazı yeni özellikleri ve bu yeni sürüme nasıl yükseltileceğini ve sıfırdan nasıl kurulacağını biliyorsunuz.

React'te yapılan bu son değişiklikler, hemen şimdi deneyimlemeniz için hazır.