Özet - React Compiler
- React kursu
- Uzman seviye
- Ders 4/32
- 5 dk
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.
Başlangıç kodu
// SearchResults bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React Compiler ile ilgili aşağıdakilerden hangisi yanlış?
- Tüm projelerde varsayılan açık Doğru cevap
- Bileşenler saf olmalı
- Babel eklentisi ile çalışır
- useCallback yazmaya gerek kalmaz
Açıklama: Henüz tüm projelerde varsayılan değildir.
2 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>;
}function SearchResults({ query, items }) {
const results = items.filter(item => item.name.includes(query));
return <p>{results.length}</p>;
}Açıklama: items.filter ile arama sonucu hesaplanır.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
otomatik memoizasyon |
Gereksiz hesabı önler |
saf render |
Yan etki yok |
useEffect |
Yan etki burada |
Babel eklentisi |
Derlemeye dahil eder |