Özet - React Compiler

Compiler ile çalışan, manuel memo olmadan performanslı bir liste yazarsın.

Özet - React Compiler

Bu grupta React Compiler'ın ne yaptığını, otomatik memoizasyonu ve uyumluluk ilkelerini öğrendin.

Derleyici useMemo ve useCallback yazma yükünü kaldırır; türetilmiş değerleri ve geri çağırmaları otomatik sabit referansla sarar. Bileşenlerin saf olması gerekir; yan etkiler useEffect içine konur.

Şimdi bu ilkeleri birleştiren bir bileşen yazacaksın.

Uygulama SearchResults bileşenini yaz

SearchResults yaz. query ve items özellikleri alsın. items.filter(item => item.name.includes(query)) ile results hesapla. <div> içinde <p>{results.length}</p> ve <ul> içinde results.map ile <li key={item.id}>{item.name}</li> göster. Dışa aktar.

Örnek çözümü göster

function SearchResults({ query, items }) {
  const results = items.filter(item => item.name.includes(query));
  return (
    <div>
      <p>{results.length}</p>
      <ul>{results.map(item => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}
export default SearchResults;

Kendini test et

React Compiler ile ilgili aşağıdakilerden hangisi yanlış?
- Tüm projelerde varsayılan açık
- Bileşenler saf olmalı
- Babel eklentisi ile çalışır
- useCallback yazmaya gerek kalmaz
Cevabı göster

Tüm projelerde varsayılan açık — Henüz tüm projelerde varsayılan değildir.

Boşluğu doldur: türetilmiş değeri hesapla

function SearchResults({ query, items }) {
  const results = items.____(item => item.name.includes(query));
  return <p>{results.length}</p>;
}

Cevabı göster

function SearchResults({ query, items }) {
  const results = items.filter(item => item.name.includes(query));
  return <p>{results.length}</p>;
}

Kavramları eşleştir

otomatik memoizasyon

Gereksiz hesabı önler
saf render

Yan etki yok
useEffect

Yan etki burada
Babel eklentisi

Derlemeye dahil eder

Sıradaki ders: Server Components nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler