Fabric
- React Native kursu
- Uzman
- Ders 3/47
- 5 dk
Fabric renderer'ı öğrenirsin.
Fabric render katmanı
Fabric, React Native'in yeni UI render katmanıdır. Eski UI manager'ın yerini alır; bileşen ağacını C++ tarafında çizer. React 18'in concurrent özelliklerini (ör. useTransition) destekler.
Fabric'te her bileşen bir ShadowNode ile temsil edilir. Komutlar (ör. scrollTo) doğrudan C++ üzerinden gider; bridge kuyruğu beklenmez.
Eşzamanlı render
Fabric, React 18 concurrent render ile uyumludur. startTransition ile düşük öncelikli güncellemeler işaretlenir; acil güncellemeler (ör. yazı yazma) önce işlenir. Bu sayede UI ana iş parçacığı serbest kalır.
Bu, uzun listelerde kaydırma sırasında UI donmasını azaltır. Eski mimaride bu destek yoktu; her güncelleme aynı öncelikteydi ve araya girerdi.
Uygulama Fabric native bileşenini tanımla
Bir MyView native bileşenini codegenNativeComponent ile tanımla. Generic parametre NativeProps olsun.
Başlangıç kodu
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {
title?: string;
}
// Bileşeni buraya tanımla
export default MyView;Örnek çözüm
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {
title?: string;
}
const MyView = codegenNativeComponent<NativeProps>('MyView');
export default MyView;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Fabric parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
Fabric |
Yeni render katmanı |
ShadowNode |
Bileşen gölgesi |
UI manager |
Eski render sistemi |
Concurrent |
Eşzamanlı render |
2 Fabric hangi React özelliğini destekler?
- Concurrent render
- Server components
- CSS modules
- Web worker'lar Doğru cevap
Açıklama: Fabric concurrent render ile uyumludur.
3 ShadowNode tipini yaz
import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {}
export default codegenNativeComponent<____>('MyView');import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {}
export default codegenNativeComponent<NativeProps>('MyView');Açıklama: NativeProps tipi generic parametre olarak verilir.