React Compiler nedir?
- React kursu
- Uzman seviye
- Ders 1/32
- 4 dk
Yeni React Compiler'ın otomatik memoizasyon sunduğunu öğrenirsin.
React Compiler nedir?
React Compiler, kaynak kodu derleme sırasında otomatik memoizasyon ekleyen bir araçtır. useMemo ve useCallback yazmak zorunda kalmazsın; derleyici gereksiz yeniden hesaplamaları kendisi engeller.
Babel eklentisi olarak çalışır ve her bileşeni analiz eder. Bir değerin bağımlılıkları değişmediyse eski sonucu yeniden kullanır. Böylece kod sade kalır, performans iyileşir.
Henüz tüm projelerde varsayılan değildir; isteyen açabilir.
Babel eklentisi ve yapılandırma
Derleyiciyi açmak için babel-plugin-react-compiler paketini Babel yapılandırmasına eklersin. Next.js'te reactCompiler: true seçeneği yeterlidir.
Derleyici yalnızca güvenli kodu memouze eder; yan etkili (impure) render çıkışlarını atlar. Bu yüzden bileşenlerin saf (pure) olması gerekir.
Eski projelerde kademeli geçiş yapılır; her dosya ayrı açılabilir.
Uygulama PriceList bileşenini yaz
PriceList bileşeni yaz. items özelliği alsın. items.reduce ile total hesapla. <div> içinde <h1>{total}</h1> ve <ul> içinde items.map ile <li key={item.id}>{item.name}</li> göster. Dışa aktar.
Başlangıç kodu
// PriceList bileşenini buraya yazÖrnek çözüm
function PriceList({ items }) {
const total = items.reduce((sum, item) => sum + item.price, 0);
return (
<div>
<h1>{total}</h1>
<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
</div>
);
}
export default PriceList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React Compiler ne yapar?
- Kodu küçültür ve sıkıştırır
- Derleme sırasında otomatik memoizasyon ekler Doğru cevap
- TypeScript tipleri üretir
- Bileşenleri sunucuda çizilir
Açıklama: Derleyici gereksiz hesaplamaları önler.
2 Boşluğu doldur: derleyiciyi aç
module.exports = {
babel: {
plugins: [['babel-plugin-react-compiler', { ____: true }]],
},
};module.exports = {
babel: {
plugins: [['babel-plugin-react-compiler', { compilation: true }]],
},
};Açıklama: compilation: true derleyiciyi başlatır.
3 Derleyici kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
otomatik memoizasyon |
Gereksiz hesabı önler |
Babel eklentisi |
Derlemeye dahil eder |
saf render |
Memouze edilebilir |
bağımlılıklar |
Değişmeyince eski sonuç |