Yeni mimari
- React Native kursu
- Uzman
- Ders 44/47
- 6 dk
Yeni mimari (JSI, Fabric) ile bileşenler yazarsın.
Yeni mimari nedir?
Yeni mimari, React Native'in JSI tabanlı yapısıdır. Eski bridge yerine JS ve native taraf doğrudan konuşur. Bu, daha az serileştirme ve daha hızlı iletişim demektir. İki temel parçası: Fabric (yeni render) ve TurboModules (yeni native modüller).
Fabric, bileşenlerin daha verimli render olmasını sağlar. TurboModules, native modüllerin yalnızca kullanıldığında yüklenmesini sağlar (lazy). Yeni mimari app.json'da "newArchEnabled": true ile açılır. Bu, performansı ölçülebilir biçimde artırır; ama bazı eski kütüphaneler uyumsuz olabilir. Test etmek önemlidir.
Fabric bileşeni yazma
Yeni mimaride bileşen yazma çoğu zaman eskisiyle aynıdır. View, Text gibi temel bileşenler otomatik olarak Fabric üzerinden render olur. Özel native bileşenler için codegen kullanılır.
Basit bir MetricCard bileşeni yazalım. Bu bileşen bir etiket ve değer gösterir. Yeni mimaride bu bileşen daha az overhead ile render olur. Kod değişmez; ama arka planda Fabric çalışır. memo ile sararsan gereksiz render'lar da engellenir. Bu, performans katmanını oluşturur.
Uygulama MetricCard bileşeni ekle
Önceki kodun üstüne bir MetricCard bileşeni ekle. Bir label ve value prop alsın. İçinde <Text>{label}: {value}</Text> döndürsün. memo ile sarılmış olsun.
Başlangıç kodu
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}
// MetricCard bileşenini buraya ekle (memo ile)Örnek çözüm
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}
const MetricCard = memo(function MetricCard({ label, value }) {
return <Text>{label}: {value}</Text>;
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Yeni mimari ayarı
"newArchEnabled": ____"newArchEnabled": trueAçıklama: newArchEnabled true yeni mimariyi açar.
2 Yeni mimari neyi değiştirir?
bridge -> JSI- JS ve native iletişimi Doğru cevap
- Ekran renkleri
- Font boyutu
- Paket adı
Açıklama: Yeni mimari JS-native iletişimini hızlandırır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
JSI |
Doğrudan erişim |
Fabric |
Yeni render |
TurboModules |
Lazy modüller |
newArchEnabled |
Ayar anahtarı |