Bileşen yeniden kullanım
- React Native kursu
- Başlangıç
- Ders 17/116
- 5 dk
Bileşenleri yeniden kullanmayı öğrenirsin.
Bileşen yeniden kullanım
Bir bileşeni tanımladıktan sonra onu istediğin kadar çağırabilirsin. Her çağrıda farklı prop'lar vererek benzer ama farklı çıktılar üretirsin. Buna yeniden kullanım denir.
Örneğin <User name='Ayşe' /> ve <User name='Alex' /> aynı User bileşenini farklı isimlerle çağırır.
Bu sayede aynı kodu tekrar yazmazsın; tek bir tanım, birçok kullanım sağlar.
Yeniden kullanımın avantajı
Yeniden kullanım, yazılım geliştirmede temel bir ilkedir. Aynı mantığı tekrar yazmak yerine, bir kez tanımlayıp birçok yerde kullanırsın. Bu, kodun kısa, tutarlı ve bakımı kolay olmasını sağlar.
Bir hata bulunduğunda yalnızca tek bir yerde (bileşen tanımında) düzeltme yaparsın; tüm çağrılar otomatik olarak güncellenir.
Bu yüzden bileşen yaklaşımı, büyük uygulamaları yönetilebilir kılan temel araçtır.
Uygulama İki User çağrısı
App bileşeni, <View> içinde iki <User /> çağrısı yapsın: ilki name='Ayşe', ikincisi name='Alex' prop'u ile. User bileşenini de name prop'u ile tanımla.
Başlangıç kodu
// User bileşenini name prop'u ile yaz
// App içinde iki farklı name ile çağır
function App() {
return null;
}Örnek çözüm
function User({ name }) {
return (
<Text>{name}</Text>
);
}
function App() {
return (
<View>
<User name='Ayşe' />
<User name='Alex' />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Yeniden kullanımı eşleştir
| Kavram | Anlamı |
|---|---|
<User name='Ayşe' /> |
İlk çağrı |
<User name='Alex' /> |
İkinci çağrı |
aynı User |
Tek tanım |
farklı name |
Farklı çıktı |
2 İkinci çağrı
<View>
<User name="Ayşe" />
____
</View><View>
<User name="Ayşe" />
<User name="Alex" />
</View>Açıklama: Aynı bileşen farklı name ile yeniden çağrıldı.
3 Yeniden kullanım ne sağlar?
- Daha uzun kod
- Daha yavaş çalışma
- Daha fazla hata
- Aynı kodu tekrar yazmamak Doğru cevap
Açıklama: Yeniden kullanım tek tanım, çok kullanım sağlar.