Fabric

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.

Örnek çözümü göster

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {
  title?: string;
}

const MyView = codegenNativeComponent<NativeProps>('MyView');

export default MyView;

Kendini test et

Fabric parçalarını eşleştir

Fabric

Yeni render katmanı
ShadowNode

Bileşen gölgesi
UI manager

Eski render sistemi
Concurrent

Eşzamanlı render
Fabric hangi React özelliğini destekler?
- Concurrent render
- Server components
- CSS modules
- Web worker'lar
Cevabı göster

Web worker'lar — Fabric concurrent render ile uyumludur.

ShadowNode tipini yaz

import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {}

export default codegenNativeComponent<____>('MyView');

Cevabı göster

import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {}

export default codegenNativeComponent<NativeProps>('MyView');

Sıradaki ders: TurboModules

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler