Özet - Concurrent features

Bir arama input'unda useDeferredValue ile akıcı liste yazarsın.

Özet - Concurrent features

Bu grupta Concurrent React'i, useTransition ve useDeferredValue hook'larını öğrendin.

Concurrent rendering çizimi bölünebilir hale getirir; acil güncellemeler hemen, ağır güncellemeler arka planda işlenir. Bu, kullanıcı girişinin akıcı kalmasını sağlar.

Büyük listelerde bile uygulama donmaz; kullanıcı akıcı bir deneyim yaşar. Şimdi concurrent arama bileşeni yazacaksın.

Uygulama ConcurrentSearch bileşenini yaz

ConcurrentSearch yaz. items özelliği alsın. useState('') ile query, useDeferredValue(query) ile deferred, useMemo ile items.filter(i => i.includes(deferred)). <input value={query} onChange={e => setQuery(e.target.value)} /> ve <ul> içinde results.map ile <li key={i}>{r}</li> göster. Dışa aktar.

Örnek çözümü göster

import { useState, useDeferredValue, useMemo } from 'react';

function ConcurrentSearch({ items }) {
  const [query, setQuery] = useState('');
  const deferred = useDeferredValue(query);
  const results = useMemo(() => items.filter(i => i.includes(deferred)), [items, deferred]);
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>
    </div>
  );
}
export default ConcurrentSearch;

Kendini test et

Aşağıdakilerden hangisi yanlış?
- Concurrent çizimi bloklar
- useDeferredValue değeri geciktirir
- isPending bekleme durumunu verir
- useTransition ertelenmiş güncelleme işaretler
Cevabı göster

Concurrent çizimi bloklar — Concurrent çizimi bloklamaz, bölünebilir yapar.

Boşluğu doldur: useMemo ile hesapla

const results = ____(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);

Cevabı göster

const results = useMemo(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);

Kavramları eşleştir

useTransition

Ertelenmiş güncelleme
useDeferredValue

Değeri geciktirir
Concurrent

Çizimi bölünebilir yapar
isPending

Bekleme durumu

Sıradaki ders: Reconciler nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler