Concurrent React nedir?

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.

Örnek çözümü göster

function DataGrid({ items }) {
  return (
    <table>
      <tbody>
        {items.map(item => (
          <tr key={item.id}><td>{item.name}</td></tr>
        ))}
      </tbody>
    </table>
  );
}
export default DataGrid;

Kendini test et

Concurrent React neyi mümkün kılar?
- Daha küçük paket üretir
- Çizimi bölünür hale getirir
- TypeScript tipleri ekler
- CSS derler
Cevabı göster

Çizimi bölünür hale getirir — Çizim bölünür, ana iş parçacığı serbest kalır.

Boşluğu doldur: transition başlat

const [isPending, startTransition] = use____();

Cevabı göster

const [isPending, startTransition] = useTransition();

Concurrent kavramlarını eşleştir

useTransition

Ertelenmiş güncelleme
useDeferredValue

Değeri geciktirir
acil güncelleme

Hemen işlenir
isPending

Bekleme durumu

Sıradaki ders: useTransition

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler