Birleştirme
- React Native kursu
- Uzman
- Ders 47/47
- 6 dk
Tüm uzman konularını birleştirerek çalışan bir mini uygulama yazarsın.
Tüm uzman konularını birleştir
Son derste tüm parçaları bağlıyoruz: yeni mimari (Fabric), performance (useMemo) ve monorepo (paylaşılan paket). App, metricKeys'i useMemo ile hesaplar; her anahtarı MetricCard ile çizer; değer formatMetric ile biçimlenir.
Bu birleşim, uzman seviye bir React Native uygulamasının iskeletidir. Yeni mimari hızlı render, useMemo önbellek, monorepo kod paylaşımı sağlar. Her katman ayrı bir derste kuruldu; şimdi hepsi birlikte çalışıyor. Bir sonraki adımda map ile metricKeys'i MetricCard listesine çevireceksin.
Uygulama MetricCard listesi çiz
Önceki kodun üstüne App'in dönüşüne bir metricKeys.map çağrısı ekle. Her anahtar için <MetricCard label={key} value={formatMetric(metrics[key])} /> döndürsün. key prop'unu da ekle.
Başlangıç kodu
import { formatMetric } from '@myorg/utils';
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>;
});
function App() {
const [metrics, setMetrics] = useState({});
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}
// App dönüşünde metricKeys.map ile MetricCard listesi çizÖrnek çözüm
import { formatMetric } from '@myorg/utils';
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>;
});
function App() {
const [metrics, setMetrics] = useState({});
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}
function App() {
const [metrics, setMetrics] = useState({ cpu: 42, mem: 60 });
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>İzleme Paneli</Text>
{metricKeys.map((key) => (
<MetricCard key={key} label={key} value={formatMetric(metrics[key])} />
))}
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 metricKeys neyle hesaplanır?
const metricKeys = ?(() => Object.keys(metrics), [metrics]);- useState
- useMemo Doğru cevap
- useEffect
- useRef
Açıklama: useMemo ile önbelleğe alınır.
2 Katmanı rolüne eşle
| Kavram | Anlamı |
|---|---|
Fabric |
Hızlı render |
useMemo |
Önbellek |
formatMetric |
Biçimleme |
MetricCard |
Bileşen |
3 map çağrısı
{____.map((key) => <MetricCard key={key} label={key} />)}{metricKeys.map((key) => <MetricCard key={key} label={key} />)}Açıklama: metricKeys.map ile liste çizilir.
4 Bu projede monorepo nasıl kullanıldı?
import { formatMetric } from '@myorg/utils';- Bildirim ile
- Animasyon ile
- Tema ile
- Paylaşılan paket ile Doğru cevap
Açıklama: @myorg/utils paylaşılan monorepo paketidir.