Concurrent React nedir?
- React kursu
- Uzman seviye
- Ders 13/32
- 4 dk
Eşzamanlı React'in arka planda çizim yapabildiğini öğrenirsin.
Concurrent React nedir?
Concurrent React, çizimi bölünebilir hale getirir. React, acil güncellemeleri hemen yaparken ağır güncellemeleri arka planda hazırlayabilir.
Bu, ana iş parçacığını bloklamadan büyük listeleri filtrelemeyi veya karmaşık çizimleri mümkün kılar. Kullanıcı yazarken uygulama donmaz.
Concurrent özellikler useTransition ve useDeferredValue ile kullanılır.
Acil ve ertelenmiş güncelleme
Bir güncelleme acil (input yazma) veya ertelenmiş (liste filtreleme) olabilir. React ikisini ayırır: acil hemen, ertelenmiş arka planda işlenir.
useTransition ile bir güncellemeyi ertelenmiş olarak işaretlersin. useDeferredValue ise bir değerin güncellenmesini geciktirir.
Bu ayrım, kullanıcı girişinin akıcı kalmasını sağlar. Böylece uygulama hızlı tepki verir.
Uygulama DataGrid bileşenini yaz
DataGrid yaz. items özelliği alsın. <table> içinde <tbody> ve items.map ile <tr key={item.id}><td>{item.name}</td></tr> göster. Dışa aktar.
Başlangıç kodu
// DataGrid bileşenini buraya yazÖrnek çözüm
function DataGrid({ items }) {
return (
<table>
<tbody>
{items.map(item => (
<tr key={item.id}><td>{item.name}</td></tr>
))}
</tbody>
</table>
);
}
export default DataGrid;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Concurrent React neyi mümkün kılar?
- Daha küçük paket üretir
- Çizimi bölünür hale getirir Doğru cevap
- TypeScript tipleri ekler
- CSS derler
Açıklama: Çizim bölünür, ana iş parçacığı serbest kalır.
2 Boşluğu doldur: transition başlat
const [isPending, startTransition] = use____();const [isPending, startTransition] = useTransition();Açıklama: useTransition ile transition başlatılır.
3 Concurrent kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useTransition |
Ertelenmiş güncelleme |
useDeferredValue |
Değeri geciktirir |
acil güncelleme |
Hemen işlenir |
isPending |
Bekleme durumu |