ما هو نظام Fabric وما الفرق بينه وبين نظام التصيير القديم في React Native؟

Question

تقدم السؤاللم أبدأقيد المراجعةمتقن

تكرار السؤال: …

Answer 1

الإجابة المختصرة

نظام Fabric هو محرك التصيير الجديد (Renderer) المعتمد على C++، حيث يدمج مباشرة مع شجرة React 18 Concurrency ويوفر رسم متزامن لعناصر الواجهة وتكامل فوري مع Yoga.

الشرح

في المحرك القديم، كان حساب التخطيط في Shadow Thread ينقل الأبعاد للـ Native UI عبر الـ Bridge مما يسبب وميضاً وتأخراً في الرسوم. في Fabric، تم توحيد كود الـ Shadow Tree والتخطيط بلغة C++ موحدة، وأصبح بالإمكان إنشاء شجرة عناصر الـ UI بشكل متزامن مع دعم كامل لـ Concurrent React وميزات مثل Suspense و Transitions.

مثال بالكود

// MyViewNativeComponent.ts — a Fabric component spec; Codegen produces the native view classes
import type { ViewProps } from "react-native";
import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";

interface NativeProps extends ViewProps {
  color?: string;
}
export default codegenNativeComponent<NativeProps>("MyView");

// With Fabric, layout can be measured synchronously during the commit phase:
function Card() {
  const ref = useRef<View>(null);
  const [height, setHeight] = useState(0);
  useLayoutEffect(() => {
    ref.current?.measure((_x, _y, _w, h) => setHeight(h));
  }, []);
  return <View ref={ref} />;
}

أخطاء شائعة

الاعتقاد بأن تفعيل Fabric يتطلب إعادة كتابة كود شاشات JSX بالكامل، فالتغييرات تكمن في طبقة المكتبات والـ Native Modules.

أسئلة متابعة

المصادر

React Native docs — Fabric