Bazı JavaScript çerçevelerinin raf ömrünün bir galon taze sütten daha kısa olduğuna dair kötü bir söz vardır. Bu, çeşitli nedenlerden dolayı React için geçerli değildir. Bir yandan kütüphane geçen yıl onuncu yaşını kutlayarak web dünyasının “en eski parçalarından” biri haline geldi. React ayrıca yayın sıklığı konusunda da ılımlılık gösteriyor: Son büyük sürüm Haziran 2022'de yayınlandı. O zamandan bu yana yalnızca birkaç hata düzeltme sürümü yayınlandı.
Duyuru
Durum ancak 5 Aralık 2024'te, birkaç ay süren sürüm adayı aşamasından sonra React 19'un son sürümünün yayınlanmasıyla değişti. Bu sadece yeni işlevler ve kancalar içermekle kalmıyor, aynı zamanda React'ın tam yığın geliştirmesinin önünü açacak tamamen yeni konseptler de içeriyor.
Nils Hartmann, arka uçta Java ve ön uçta React konusunda uzmanlaşmış, aynı zamanda atölye çalışmaları ve eğitimler düzenleyen serbest çalışan bir yazılım geliştiricisi ve koçudur.
Meta veri desteği
Bir web sitesinin meta verileriyle çalışmaya yönelik yeni özellikler, React 19'daki küçük ama kullanışlı yenilikler kategorisine girmektedir. Meta veriler, DOM benzeri öğelerdir title, meta VEYA link içinde head-DOM alanı. Bu nedenle genellikle React bileşen hiyerarşisinin parçası değildirler ve React'ın yerleşik araçlarıyla kolayca kullanılamazlar. Bunun yerine birçok projede kütüphaneler kullanılıyor.
React 19 ile bu öğeler artık JSX'te de mevcuttur ve bu nedenle herhangi bir bileşende kullanılabilir. React, çalışma zamanında öğelerin doğru konuma yerleştirilmesini sağlar head-Gezici unsur. Bir bileşen hiyerarşisinde bu tür birden fazla öğe varsa, bileşen hiyerarşisindeki en düşük öğe “kazanır”.
Aşağıdaki listede bu davranış yöntemi kullanılarak gösterilmektedir title-Elementler. Uygulama bileşeni, tarayıcı penceresi başlığını “Blog Uygulaması” olarak ayarlar. Eğer alt bileşen BlogPost görüntülendiğinde, alt bileşen başlığın üzerine yazar ve böylece artık görüntülenen blog yazısının başlığıyla eşleşir.
function App({postId}) {
return <main>
<title>Blog Application</title>
{!!postId && <BlogPost postId={postId} />}
</main>
}
function BlogPost({postId}) {
const post = useBlogQuery(postId);
return <article>
<title>{post.title}</title>
{/* ... */}
</article>
}
Başlığa ve diğer meta verilere ek olarak artık şunları da yapabilirsiniz: script-Elemanları ve harici stil sayfası dosyalarını doğrudan bir bileşene dönüştürün. React yine bunun uygun olmasını sağlar script– sırasıyla linköğeler DOM'un başına yerleştirilir ve bir bileşenin yalnızca tarayıcı uygun kaynakları yükledikten sonra görüntülenmesini sağlar. Bu, dinamik olarak eklenen komut dosyalarıyla (örneğin, Google Haritalar API'sı gibi harici sağlayıcılardan alınan) veya stil sayfalarıyla çalışmayı büyük ölçüde basitleştirir. Meta veri özellikleri, kaynakları önceden yükleme yeteneği ile tamamlanmaktadır. Geliştiriciler bunu yapabilir head-DOM öğesi, gerektiğinde yerel olarak kullanılabilmeleri için tarayıcının arka planda önceden indirdiği stil sayfaları veya yazı tipleri gibi kaynakları belirtir. React 19 ile bu tür kaynakları kodunuzda belirtebilirsiniz. React daha sonra karşılık gelen DOM öğelerinin oluşturulmasıyla ilgilenir.
React uygulamalarındaki özel bir zorluk, işleme döngülerini optimize etmek veya kaydetmektir. React temel olarak bir bileşeni, alt bileşenleri de dahil olmak üzere durumu değiştiğinde yeniden işler. React'ta artık Angular'daki Signals'ta olduğu gibi ayrıntılı değişiklik izleme özelliği yok. Bu mutlaka bir sorun olmak zorunda değil çünkü oluşturma genellikle çok hızlıdır, ayrıca değişiklikler yalnızca sanal DOM'da gerçekleştiğinden ve React, DOM'da potansiyel olarak pahalı değişiklikleri mutlak minimumda tuttuğundan. Ancak derin bileşen hiyerarşileri veya karmaşık bileşenler söz konusu olduğunda bu, performans sorunlarına yol açabilir. Bu yüzden var memo– Bitmiş bir bileşenin yanı sıra kancaları da önbelleğe alabilen işlev useMemo VE useCallbackbir bileşen içindeki verileri veya işlevleri önbelleğe almak için.
Ancak bu üç işlevi kullanmak hataya açıktır çünkü React'in önbelleğe alınmış nesnelerin hala geçerli olup olmadığını veya yeniden oluşturulması gerekip gerekmediğini kontrol etmek için kullandığı mekanizma referans karşılaştırmalarını kullanır. Bir referans (yanlışlıkla) çok sık yeniden oluşturulduğunda, önbellek etkili bir şekilde devre dışı bırakılır. Ayrıca endişelenme useMemo– VE useCallback-Kodunuzda karışıklık yaratmak için bileşen işlevlerini hızla çağırın.
Yeni React derleyicisi bu sorunları azaltmayı hedefliyor. Bu sayede React geliştiricileri birçok yerde tanıtılmalıdır memo, useMemo VE useCallback onsuz da yapabilir. Derleyici yazılı kodu analiz eder ve ardından günümüzün el yazısı koduna benzer şekilde davranan optimize edilmiş kodun çıktısını alır. memo-, useMemo– VE useCallback-Çağrı çalışır ve bu nedenle ayrıntılı güncellemeleri garanti eder.
React derleyicisi bağımsız bir projedir ve React 19 sürümünden bağımsız olarak görünecektir.
Referansları ve bağlamı basitleştirin
Mevcut API'ler de küçük basitleştirmelere tabi tutuldu. İşte böyle refNitelik, diğer tüm özellikler gibi, bir bileşenin özelliklerinde bildirilebilen ve kullanılabilen normal bir özellik haline geldi. Bu biraz karmaşık forwardRef-Özellik gereksiz hale gelir ve React ekibi tarafından kullanımdan kaldırılmış olarak işaretlenir. Bağlam oluşturmak ve sağlamak da biraz daha kolaylaştı. THE createContextişlev, gelecekte doğrudan sağlayıcı bileşenini döndürür. Tüketici bileşeninin yerini kancanın eklenmesiyle değiştirildiği için tüketici ve tedarikçi bileşenlerine bölünmeye artık gerek yoktur useContext uzun zamandır gerekli değildi.
Bağlam nasıl yaratılırsa yaratılsın, oradadır. use-Bir bileşen içinde ona erişmenin yeni bir yolunu veya bir sözünü işleyin. Buna karşılık useContext bu use-İşlev bir kanca değildir (bu nedenle belgelerde Kancalar altında değil, API altında açıklanmıştır) ve bu nedenle “Kanca Kurallarına” tabi değildir. Sonuç olarak, örneğin bir kanca işlevi bir iç mekanda kullanılamaz. ifbeyanlara denir. THE use-Fonksiyon diğer normal fonksiyonlar gibi kullanılabilir.
Sonraki liste bu davranışı gösterir. THE CounterContext bileşende yalnızca onay kutusunu tıklarsanız gereklidir, aksi takdirde bileşen kendi verilerini kullanmaz. İle useContext Ancak onay kutusunun durumu ne olursa olsun içerik her zaman sorgulanmalıdır. İle use Bileşen, yalnızca onay kutusunun uygun şekilde seçilmesi durumunda bağlamı sorgular. Bunun yalnızca kod üzerinde değil aynı zamanda çalışma zamanı üzerinde de etkisi vardır: onay kutusu tıklatılmadığı ve dolayısıyla içerik dahil edilmediği sürece use sorgulandığında React ayrıca Context'in değeri değiştiğinde bileşeni yeniden oluşturmaz. İle kullanıldığında useContext Bağlam değerine gerçekten ihtiyaç duyulmasa bile bileşen yeniden görüntülenir (onay kutusu seçilmemiştir).
export const CounterContext = createContext(null);
function CounterContextProvider{children}) {
const value = { /* ... */ }
// bisher:
return <CounterContext.Provider value={value}>{children}</CounterContext.Provider>
// React 19:
return <CounterContext value={value}>{children}</CounterContext>
}
function CounterDisplay() {
const [selected, setSelected] = useState(false);
const counter = selected ? use(CounterContext) : null;
return (
<section>
<label>
Wert anzeigen
<input
type="checkbox"
checked={selected}
onChange={e => setSelected(e.target.checked)}
/>
</label>
{counter && <p>Aktueller Wert: {counter.value}</p>}
</section>
);
}
Yumuşak geçişler: geçişler
Sunucu tarafı verilerinin okunması ve yazılması gibi eşzamansız eylemlerle çalışırken çok sayıda yeni olasılık vardır. React 18 zaten geçişleri tanıttı. Bu, arayüz güncellemelerine öncelik vermenizi sağlar. Genellikle bir durumun değiştirilmesi React'in bileşeni yeniden oluşturmasına neden olur ve güncellenmiş kullanıcı arayüzü (UI) tarayıcıda hemen görünür.
Geliştiriciler bir geri çağırma işlevini belirtmek için bir geçiş kullanabilir. Burada bileşenin durumunu değiştirebilirsiniz. Ancak bileşen artık arka planda işleniyor. Başlangıçta mevcut kullanıcı arayüzü değişmez. Yalnızca arka plan oluşturma işlemi tamamlandıktan sonra kullanıcı arayüzü güncellenir.
Bu davranış özellikle uzun süren güncellemeler için kullanışlıdır ve aksi takdirde kullanıcı arayüzünün çökmesine neden olabilir. Bir geçişle, arka planda yeniden hesaplamalar gerçekleştirilir ve “eski” kullanıcı arayüzü, arka planda oluşturma tamamlanana kadar etkin kalır. Örneğin, bir bileşenin geçerli güncellemenin göstergesini görüntülemesi için bir geçiş, bileşenin o anda çalışıp çalışmadığına ilişkin bilgi sağlar.
Liste, React 18 varyantındaki bu davranışı çok basit bir örnek kullanarak göstermektedir:
function Counter() {
const [count, setCount] = useState(0);
const [isPending, startTransition] = useTransition();
const handleClick = () => {
startTransition(() => {
setCount(c => c + 1);
});
};
return <section>
<button onClick={handleClick}>Hochzählen</button>
{isPending && <p>Darstellung wird aktualisiert.</p>}
<CounterView count={count} />
</section>
}
Burada olması gereken CounterView karmaşık bir alt bileşen olabilir ve dosyayı değiştirdikten sonra count-State'in oluşturulması biraz zaman alır. Durum değişikliğinin meydana geldiği geçiş nedeniyle, arka planda görüntü oluşturma meydana gelir. React artık anında işleniyor Counter-Yeni bileşen, ancak count-Başlangıçta mevcut değerini belirtin. Ancak teslim eder useTransition-Şimdi ara true İçin isPending Geriye. Bileşen daha sonra hemen “Ekran güncelleme” bilgisini görüntüleyebilir. Bileşen artık arka planda yeniden işleniyor. Orada count yeni e değerine ayarla isPending VE false. Bileşen daha sonra gelecekteki temsili işleyebilir. Renderleme tamamlandıktan sonra React eski renderı yenisiyle değiştirir. Arka plan oluşturma sırasında bir hata oluşursa React, yeni gösterimi değiştirmeden atar.
React 19'daki yenilik, geçiş geri çağrısı olarak kullanılan bir işlevin eşzamansız olabilmesidir. Bu tür işlevlere eylemler denir. Bu, örneğin sunucu çağrılarını bir geçişe taşımak için kullanılabilir. Daha sonra, asenkron sunucuya çağrı tamamlanana kadar önceki gösterim korunur. Önceki örnekte olduğu gibi React, geçişin devam edip etmediğini bildirir, böylece bir bekleme mesajı görünebilir.
Liste, benzer bir sayaca sahip bir düğmeyi temsil eden bir bileşeni kullanan eşzamansız bir eylem geçişini gösterir:
async function registerLikeOnServer() {
// Server-Call z. B. mit fetch ausführen
// neue Likes vom Server zurückliefern...
}
function LikeButton({initialLikes}) {
const [likes, setLikes] = useState(initialLikes);
const [isPending, startTransition] = useTransition();
const handleClick = () => {
startTransition(async () => {
const newLikes = await registerLikeOnServer();
setLikes(newLikes);
});
};
return <button onClick={handleClick}
disable={isPending}>{likes} Likes</button>
}
Düğmeye tıklamak, yapılacak bir sunucu çağrısını tetikler, bu da sunucudaki beğenilerin sayısını artırır ve yeni sayıyı döndürür (bunun için kod React'tan bağımsızdır ve basitlik açısından listeden çıkarılmıştır). Düğmeye tıkladıktan sonra React, bileşeni hemen eski haliyle işler, isPending Ancak true Geriye. Bu, kaydederken düğmenin kullanılabileceği anlamına gelir disabled-Durumu görüntüle. Sunucu çağrısı arka planda zaten çalışıyor. Bu tamamlandığında durum sıfırlanır ve bileşen daha sonra yeni durumda oluşturulur ve görüntülenir.
(Resim: WD Ashari/Shutterstock.com)
enterJS 2025, 7 ve 8 Mayıs'ta Mannheim'da gerçekleşecek. Konferans, JavaScript tabanlı iş dünyasına kapsamlı bir bakış sunuyor. Odak noktası yalnızca JavaScript ve TypeScript programlama dillerinin kendisi değil, aynı zamanda çerçeveler ve araçlar, erişilebilirlik, nasıl yapılır raporları, UI/UX ve güvenliktir.
Programın Ocak ortasında yayına girmesi bekleniyor. O zamana kadar Blind Bird için indirimli biletler online mağazadan satın alınabilir.
Duyuru
Durum ancak 5 Aralık 2024'te, birkaç ay süren sürüm adayı aşamasından sonra React 19'un son sürümünün yayınlanmasıyla değişti. Bu sadece yeni işlevler ve kancalar içermekle kalmıyor, aynı zamanda React'ın tam yığın geliştirmesinin önünü açacak tamamen yeni konseptler de içeriyor.
Nils Hartmann, arka uçta Java ve ön uçta React konusunda uzmanlaşmış, aynı zamanda atölye çalışmaları ve eğitimler düzenleyen serbest çalışan bir yazılım geliştiricisi ve koçudur.
Meta veri desteği
Bir web sitesinin meta verileriyle çalışmaya yönelik yeni özellikler, React 19'daki küçük ama kullanışlı yenilikler kategorisine girmektedir. Meta veriler, DOM benzeri öğelerdir title, meta VEYA link içinde head-DOM alanı. Bu nedenle genellikle React bileşen hiyerarşisinin parçası değildirler ve React'ın yerleşik araçlarıyla kolayca kullanılamazlar. Bunun yerine birçok projede kütüphaneler kullanılıyor.
React 19 ile bu öğeler artık JSX'te de mevcuttur ve bu nedenle herhangi bir bileşende kullanılabilir. React, çalışma zamanında öğelerin doğru konuma yerleştirilmesini sağlar head-Gezici unsur. Bir bileşen hiyerarşisinde bu tür birden fazla öğe varsa, bileşen hiyerarşisindeki en düşük öğe “kazanır”.
Aşağıdaki listede bu davranış yöntemi kullanılarak gösterilmektedir title-Elementler. Uygulama bileşeni, tarayıcı penceresi başlığını “Blog Uygulaması” olarak ayarlar. Eğer alt bileşen BlogPost görüntülendiğinde, alt bileşen başlığın üzerine yazar ve böylece artık görüntülenen blog yazısının başlığıyla eşleşir.
function App({postId}) {
return <main>
<title>Blog Application</title>
{!!postId && <BlogPost postId={postId} />}
</main>
}
function BlogPost({postId}) {
const post = useBlogQuery(postId);
return <article>
<title>{post.title}</title>
{/* ... */}
</article>
}
Başlığa ve diğer meta verilere ek olarak artık şunları da yapabilirsiniz: script-Elemanları ve harici stil sayfası dosyalarını doğrudan bir bileşene dönüştürün. React yine bunun uygun olmasını sağlar script– sırasıyla linköğeler DOM'un başına yerleştirilir ve bir bileşenin yalnızca tarayıcı uygun kaynakları yükledikten sonra görüntülenmesini sağlar. Bu, dinamik olarak eklenen komut dosyalarıyla (örneğin, Google Haritalar API'sı gibi harici sağlayıcılardan alınan) veya stil sayfalarıyla çalışmayı büyük ölçüde basitleştirir. Meta veri özellikleri, kaynakları önceden yükleme yeteneği ile tamamlanmaktadır. Geliştiriciler bunu yapabilir head-DOM öğesi, gerektiğinde yerel olarak kullanılabilmeleri için tarayıcının arka planda önceden indirdiği stil sayfaları veya yazı tipleri gibi kaynakları belirtir. React 19 ile bu tür kaynakları kodunuzda belirtebilirsiniz. React daha sonra karşılık gelen DOM öğelerinin oluşturulmasıyla ilgilenir.
React uygulamalarındaki özel bir zorluk, işleme döngülerini optimize etmek veya kaydetmektir. React temel olarak bir bileşeni, alt bileşenleri de dahil olmak üzere durumu değiştiğinde yeniden işler. React'ta artık Angular'daki Signals'ta olduğu gibi ayrıntılı değişiklik izleme özelliği yok. Bu mutlaka bir sorun olmak zorunda değil çünkü oluşturma genellikle çok hızlıdır, ayrıca değişiklikler yalnızca sanal DOM'da gerçekleştiğinden ve React, DOM'da potansiyel olarak pahalı değişiklikleri mutlak minimumda tuttuğundan. Ancak derin bileşen hiyerarşileri veya karmaşık bileşenler söz konusu olduğunda bu, performans sorunlarına yol açabilir. Bu yüzden var memo– Bitmiş bir bileşenin yanı sıra kancaları da önbelleğe alabilen işlev useMemo VE useCallbackbir bileşen içindeki verileri veya işlevleri önbelleğe almak için.
Ancak bu üç işlevi kullanmak hataya açıktır çünkü React'in önbelleğe alınmış nesnelerin hala geçerli olup olmadığını veya yeniden oluşturulması gerekip gerekmediğini kontrol etmek için kullandığı mekanizma referans karşılaştırmalarını kullanır. Bir referans (yanlışlıkla) çok sık yeniden oluşturulduğunda, önbellek etkili bir şekilde devre dışı bırakılır. Ayrıca endişelenme useMemo– VE useCallback-Kodunuzda karışıklık yaratmak için bileşen işlevlerini hızla çağırın.
Yeni React derleyicisi bu sorunları azaltmayı hedefliyor. Bu sayede React geliştiricileri birçok yerde tanıtılmalıdır memo, useMemo VE useCallback onsuz da yapabilir. Derleyici yazılı kodu analiz eder ve ardından günümüzün el yazısı koduna benzer şekilde davranan optimize edilmiş kodun çıktısını alır. memo-, useMemo– VE useCallback-Çağrı çalışır ve bu nedenle ayrıntılı güncellemeleri garanti eder.
React derleyicisi bağımsız bir projedir ve React 19 sürümünden bağımsız olarak görünecektir.
Referansları ve bağlamı basitleştirin
Mevcut API'ler de küçük basitleştirmelere tabi tutuldu. İşte böyle refNitelik, diğer tüm özellikler gibi, bir bileşenin özelliklerinde bildirilebilen ve kullanılabilen normal bir özellik haline geldi. Bu biraz karmaşık forwardRef-Özellik gereksiz hale gelir ve React ekibi tarafından kullanımdan kaldırılmış olarak işaretlenir. Bağlam oluşturmak ve sağlamak da biraz daha kolaylaştı. THE createContextişlev, gelecekte doğrudan sağlayıcı bileşenini döndürür. Tüketici bileşeninin yerini kancanın eklenmesiyle değiştirildiği için tüketici ve tedarikçi bileşenlerine bölünmeye artık gerek yoktur useContext uzun zamandır gerekli değildi.
Bağlam nasıl yaratılırsa yaratılsın, oradadır. use-Bir bileşen içinde ona erişmenin yeni bir yolunu veya bir sözünü işleyin. Buna karşılık useContext bu use-İşlev bir kanca değildir (bu nedenle belgelerde Kancalar altında değil, API altında açıklanmıştır) ve bu nedenle “Kanca Kurallarına” tabi değildir. Sonuç olarak, örneğin bir kanca işlevi bir iç mekanda kullanılamaz. ifbeyanlara denir. THE use-Fonksiyon diğer normal fonksiyonlar gibi kullanılabilir.
Sonraki liste bu davranışı gösterir. THE CounterContext bileşende yalnızca onay kutusunu tıklarsanız gereklidir, aksi takdirde bileşen kendi verilerini kullanmaz. İle useContext Ancak onay kutusunun durumu ne olursa olsun içerik her zaman sorgulanmalıdır. İle use Bileşen, yalnızca onay kutusunun uygun şekilde seçilmesi durumunda bağlamı sorgular. Bunun yalnızca kod üzerinde değil aynı zamanda çalışma zamanı üzerinde de etkisi vardır: onay kutusu tıklatılmadığı ve dolayısıyla içerik dahil edilmediği sürece use sorgulandığında React ayrıca Context'in değeri değiştiğinde bileşeni yeniden oluşturmaz. İle kullanıldığında useContext Bağlam değerine gerçekten ihtiyaç duyulmasa bile bileşen yeniden görüntülenir (onay kutusu seçilmemiştir).
export const CounterContext = createContext(null);
function CounterContextProvider{children}) {
const value = { /* ... */ }
// bisher:
return <CounterContext.Provider value={value}>{children}</CounterContext.Provider>
// React 19:
return <CounterContext value={value}>{children}</CounterContext>
}
function CounterDisplay() {
const [selected, setSelected] = useState(false);
const counter = selected ? use(CounterContext) : null;
return (
<section>
<label>
Wert anzeigen
<input
type="checkbox"
checked={selected}
onChange={e => setSelected(e.target.checked)}
/>
</label>
{counter && <p>Aktueller Wert: {counter.value}</p>}
</section>
);
}
Yumuşak geçişler: geçişler
Sunucu tarafı verilerinin okunması ve yazılması gibi eşzamansız eylemlerle çalışırken çok sayıda yeni olasılık vardır. React 18 zaten geçişleri tanıttı. Bu, arayüz güncellemelerine öncelik vermenizi sağlar. Genellikle bir durumun değiştirilmesi React'in bileşeni yeniden oluşturmasına neden olur ve güncellenmiş kullanıcı arayüzü (UI) tarayıcıda hemen görünür.
Geliştiriciler bir geri çağırma işlevini belirtmek için bir geçiş kullanabilir. Burada bileşenin durumunu değiştirebilirsiniz. Ancak bileşen artık arka planda işleniyor. Başlangıçta mevcut kullanıcı arayüzü değişmez. Yalnızca arka plan oluşturma işlemi tamamlandıktan sonra kullanıcı arayüzü güncellenir.
Bu davranış özellikle uzun süren güncellemeler için kullanışlıdır ve aksi takdirde kullanıcı arayüzünün çökmesine neden olabilir. Bir geçişle, arka planda yeniden hesaplamalar gerçekleştirilir ve “eski” kullanıcı arayüzü, arka planda oluşturma tamamlanana kadar etkin kalır. Örneğin, bir bileşenin geçerli güncellemenin göstergesini görüntülemesi için bir geçiş, bileşenin o anda çalışıp çalışmadığına ilişkin bilgi sağlar.
Liste, React 18 varyantındaki bu davranışı çok basit bir örnek kullanarak göstermektedir:
function Counter() {
const [count, setCount] = useState(0);
const [isPending, startTransition] = useTransition();
const handleClick = () => {
startTransition(() => {
setCount(c => c + 1);
});
};
return <section>
<button onClick={handleClick}>Hochzählen</button>
{isPending && <p>Darstellung wird aktualisiert.</p>}
<CounterView count={count} />
</section>
}
Burada olması gereken CounterView karmaşık bir alt bileşen olabilir ve dosyayı değiştirdikten sonra count-State'in oluşturulması biraz zaman alır. Durum değişikliğinin meydana geldiği geçiş nedeniyle, arka planda görüntü oluşturma meydana gelir. React artık anında işleniyor Counter-Yeni bileşen, ancak count-Başlangıçta mevcut değerini belirtin. Ancak teslim eder useTransition-Şimdi ara true İçin isPending Geriye. Bileşen daha sonra hemen “Ekran güncelleme” bilgisini görüntüleyebilir. Bileşen artık arka planda yeniden işleniyor. Orada count yeni e değerine ayarla isPending VE false. Bileşen daha sonra gelecekteki temsili işleyebilir. Renderleme tamamlandıktan sonra React eski renderı yenisiyle değiştirir. Arka plan oluşturma sırasında bir hata oluşursa React, yeni gösterimi değiştirmeden atar.
React 19'daki yenilik, geçiş geri çağrısı olarak kullanılan bir işlevin eşzamansız olabilmesidir. Bu tür işlevlere eylemler denir. Bu, örneğin sunucu çağrılarını bir geçişe taşımak için kullanılabilir. Daha sonra, asenkron sunucuya çağrı tamamlanana kadar önceki gösterim korunur. Önceki örnekte olduğu gibi React, geçişin devam edip etmediğini bildirir, böylece bir bekleme mesajı görünebilir.
Liste, benzer bir sayaca sahip bir düğmeyi temsil eden bir bileşeni kullanan eşzamansız bir eylem geçişini gösterir:
async function registerLikeOnServer() {
// Server-Call z. B. mit fetch ausführen
// neue Likes vom Server zurückliefern...
}
function LikeButton({initialLikes}) {
const [likes, setLikes] = useState(initialLikes);
const [isPending, startTransition] = useTransition();
const handleClick = () => {
startTransition(async () => {
const newLikes = await registerLikeOnServer();
setLikes(newLikes);
});
};
return <button onClick={handleClick}
disable={isPending}>{likes} Likes</button>
}
Düğmeye tıklamak, yapılacak bir sunucu çağrısını tetikler, bu da sunucudaki beğenilerin sayısını artırır ve yeni sayıyı döndürür (bunun için kod React'tan bağımsızdır ve basitlik açısından listeden çıkarılmıştır). Düğmeye tıkladıktan sonra React, bileşeni hemen eski haliyle işler, isPending Ancak true Geriye. Bu, kaydederken düğmenin kullanılabileceği anlamına gelir disabled-Durumu görüntüle. Sunucu çağrısı arka planda zaten çalışıyor. Bu tamamlandığında durum sıfırlanır ve bileşen daha sonra yeni durumda oluşturulur ve görüntülenir.
(Resim: WD Ashari/Shutterstock.com)
enterJS 2025, 7 ve 8 Mayıs'ta Mannheim'da gerçekleşecek. Konferans, JavaScript tabanlı iş dünyasına kapsamlı bir bakış sunuyor. Odak noktası yalnızca JavaScript ve TypeScript programlama dillerinin kendisi değil, aynı zamanda çerçeveler ve araçlar, erişilebilirlik, nasıl yapılır raporları, UI/UX ve güvenliktir.
Programın Ocak ortasında yayına girmesi bekleniyor. O zamana kadar Blind Bird için indirimli biletler online mağazadan satın alınabilir.