Yeni mimari

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.

Örnek çözümü göster

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>;
});

Kendini test et

Yeni mimari ayarı

"newArchEnabled": ____

Cevabı göster

"newArchEnabled": true

Yeni mimari neyi değiştirir?
```
bridge -> JSI
```
- JS ve native iletişimi
- Ekran renkleri
- Font boyutu
- Paket adı
Cevabı göster

JS ve native iletişimi — Yeni mimari JS-native iletişimini hızlandırır.
Parçayı rolüne eşle

JSI

Doğrudan erişim
Fabric

Yeni render
TurboModules

Lazy modüller
newArchEnabled

Ayar anahtarı

Sıradaki ders: Performance

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler