Mart 2022'de React ekibi, React 18'in resmi çıkışını duyurdu. Bu sürüm, "eşzamanlı işleme" kavramına dayalı olarak performans iyileştirmeye yönelik bir dizi yeni özellikle birlikte geldi. Eşzamanlı oluşturmanın ardındaki fikir, DOM'a oluşturma işlemini kesintiye uğratabilir hale getirmektir.
Yeni özellikler arasında beş kanca bulunur: useId, useTransition, useDerredValue, useSyncExternalStore ve useInsertionEffect.
Tepki kullanımıGeçiş Kancası
Varsayılan olarak, tüm React durumu güncellemeleri acildir. Uygulamanızdaki farklı durum güncellemeleri aynı kaynaklar için rekabet ederek uygulamayı yavaşlatır. Kullanım Geçişi Tepki kancası bazı durum güncellemelerini acil olmayan olarak işaretlemenize izin vererek bu sorunu çözer. Bu, acil durum güncellemelerinin daha düşük önceliğe sahip olanları kesintiye uğratmasına izin verir.
Arama Sayfası Bileşeni
Bu basit program, iki durumu (bir giriş alanı ve bazı arama sonuçları) güncelleyen bir arama motorunu taklit eder.
içe aktarmak { useState } itibaren "tepki";
işlevArama Sayfası() {
const [giriş, setInput] = useState("")
const [liste, setList] = useState([]);const listeSize = 30000
işlevkoluDeğiştir(e) {
setInput(e.hedef.değer);
const listItems = [];için (İzin Vermek ben = 0; ben < listeSize; ben++){
listeÖğeler.itmek(e.hedef.değer);
}setList (listItems);
}dönüş (
<div>
<etiket>İnternette ara: </label>
<giriş türü="Metin" değer={input} onChange={handleChange} />
{liste.map((öğe, dizin) => {
dönüş <div anahtarı={indeks}>{öğe}</div>
})}
</div>
);
}
ihracatvarsayılan Arama Sayfası;
Güncellenmiş Uygulama Bileşeni
içe aktarmak Arama Sayfası itibaren "./Components/SearchPage";işlevUygulama() {
dönüş (
<div>
< Arama Sayfası/>
</div>
);
}
ihracatvarsayılan Uygulama;
Yukarıdaki kod, bir giriş alanına sahip bir React uygulaması oluşturur:
Alana karakterleri yazmaya başladığınızda, yazılan metnin 30.000 kopyası aşağıda görünecektir:
Hızlı bir şekilde art arda birkaç karakter yazarsanız, bir gecikme tespit etmelisiniz. Karakterlerin hem giriş alanında hem de "arama sonucu alanında" görünmesi için geçen süreyi etkiler. Bunun nedeni, React'in her iki durum güncellemesini aynı anda çalıştırmasıdır.
Demo sizin için çok yavaş veya çok hızlı çalışıyorsa, listeBoyutu buna göre değer.
useTransition kancasını uygulamaya eklemek, bir durum güncellemesini diğerine göre önceliklendirmenize olanak tanır.
useTransition Hook'u kullanma
içe aktarmak {useState, useTransition} itibaren "tepki";işlevArama Sayfası() {
const [isPending, startTransition] = useTransition();
const [giriş, setInput] = useState("")
const [liste, setList] = useState([]);const listeSize = 30000
işlevkoluDeğiştir(e) {
setInput(e.hedef.değer);
startTransition(() => {
const listItems = [];için (İzin Vermek ben = 0; ben < listeSize; ben++){
listeÖğeler.itmek(e.hedef.değer);
}setList (listItems);
});
}dönüş (
<div>
<etiket>İnternette ara: </label>
<giriş türü="Metin" değer={input} onChange={handleChange} />{beklemede? "...Sonuçlar Yükleniyor": list.map((öğe, dizin) => {
dönüş <div anahtarı={indeks}>{öğe}</div>
})}
</div>
);
}
ihracatvarsayılan Arama Sayfası;
güncelleniyor Arama Sayfası yukarıdaki koda sahip bileşen, "arama sonucu alanı" yerine giriş alanına öncelik verir. Bu basit değişikliğin açık bir etkisi var: Giriş alanına yazdığınız metni hemen görmeye başlamalısınız. Yalnızca "arama sonucu alanı" yine de hafif bir gecikmeye sahip olacaktır. Bunun nedeni başlangıçGeçişuygulama programlama arayüzü (API) useTransition kancasından.
Arama sonuçlarını kullanıcı arayüzüne dönüştüren kod şimdi başlangıçGeçiş API. Bu, giriş alanının arama sonuçlarının durum güncellemesini kesmesine izin verir. Ne zaman beklemede() işlevi “…Yükleniyor sonucu” görüntüler, bir geçişin (bir durumdan diğerine) gerçekleştiğini gösterir.
React useDeferredValue Hook
useDeferredValue kancası, zorunlu olmayan bir durum güncellemesinin yeniden oluşturulmasını ertelemenize olanak tanır. useTransition kancası gibi, useDeferredValue kancası da bir eşzamanlılık kancasıdır. useDeferredValue kancası, bir durumun geçiş sırasında orijinal değerini korumasına izin verir.
useDeferredValue() Kancalı SearchPage Bileşeni
içe aktarmak { useState, useTransition, useDeferredValue } itibaren "tepki";işlevArama Sayfası() {
const [,startTransition] = useTransition();
const [giriş, setInput] = useState("")
const [liste, setList] = useState([]);const listeSize = 30000
işlevkoluDeğiştir(e) {
setInput(e.hedef.değer);
startTransition(() => {
const listItems = [];için (İzin Vermek ben = 0; ben < listeSize; ben++){
listeÖğeler.itmek(e.hedef.değer);
}setList (listItems);
});
}
const ertelenmişValue = useDeferredValue (giriş);
dönüş (
<div>
<etiket>İnternette ara: </label>
<giriş türü="Metin" değer={input} onChange={handleChange} />{liste.map((öğe, dizin) => {
dönüş <div anahtarı={index} girdi={ertelenmişValue} >{öğe}</div>
})}
</div>
);
}
ihracatvarsayılan Arama Sayfası;
Yukarıdaki kodda göreceksiniz ki, beklemede() işlev artık yok. Bunun nedeni, ertelenmişDeğer useDeferredValue kancasından gelen değişken, beklemede() durum geçişi sırasında işlev. Yeni bir karakter yazdığınızda arama sonuçları listesinin yenilenmesi yerine, uygulama durumu güncelleyene kadar eski değerlerini koruyacaktır.
React useSyncExternalStore Hook
Uygulama koduyla çalışan useTransition ve useDeferredValue kancalarının aksine, useSyncExternalStore kitaplıklarla çalışır. React uygulamanızın harici kitaplıklara abone olmasına ve bu kitaplıklardan veri okumasına olanak tanır. useSyncExternalStore kancası aşağıdaki bildirimi kullanır:
const durum = useSyncExternalStore (abone olun, getSnapshot[, getServerSnapshot]);Bu imza şunları içerir:
- durum: useSyncExternalStore kancasının döndürdüğü veri deposunun değeri.
- abone olmak: veri deposu değiştiğinde bir geri arama kaydeder.
- Anlık Görüntü al: veri deposunun geçerli değerini döndürür.
- getServerSnapshot: sunucu oluşturma sırasında kullanılan anlık görüntüyü döndürür.
useSyncExternalStore ile bir veri deposunun tamamına veya bir veri deposundaki belirli bir alana abone olabilirsiniz.
React useInsertionEffect Hook
useInsertionEffect kancası, kitaplıklarla çalışan başka bir yeni React kancasıdır. Ancak, veri depoları yerine useInsertionEffect kancası, CSS-in-JS kitaplıklarıyla çalışır. Bu kanca, stil oluşturma performansı sorunlarını giderir. useLayoutEffect kancasındaki düzeni okumadan önce DOM'ye stil verir.
React useId Hook
Benzersiz kimlikler gerektiren durumlarda useId kancasını kullanırsınız (bir listedeki anahtarlar hariç). Ana amacı, React sunucu hidrasyon uyuşmazlığı hatasından kaçınarak istemci ve sunucu arasında benzersiz kalan kimlikler oluşturmaktır. useId kancası aşağıdaki bildirimi kullanır:
const kimlik = useId()beyannamede İD içeren benzersiz bir dizedir. : jeton. Deklarasyondan sonra, İD doğrudan ona ihtiyaç duyan eleman(lar)a değişken.
Bu Yeni Kancalar React'e Ne Değer Katıyor?
useTransition ve useDeferredValue kancaları, uygulama kodu kancalarıdır. Eşzamanlılık oluşturma yoluyla uygulamaların performansını artırırlar. useId kancası, istemci ve sunucu arasında benzersiz kimlikler oluşturarak hidrasyon uyuşmazlığı hatasını giderir.
useSyncExternalStore ve useInsertionEffect kancaları, eşzamanlılık oluşturmayı kolaylaştırmak için harici kitaplıklarla birlikte çalışır. useInsertionEffect kancası, CSS-in-JS kitaplıklarıyla çalışır. useSyncExternalStore kancası, Redux mağazası gibi veri deposu kitaplıklarıyla çalışır.
Bu kancalar birlikte performansta büyük bir artış sağlar ve bu da kullanıcı deneyimini geliştirir.
