تكرار السؤال: …
الإجابة المختصرة
هذا وصف المعمارية القديمة (Legacy) التي حلت محلها New Architecture الافتراضية منذ 0.76. يتكون التطبيق من ثلاثة خيوط أساسية: Main/UI Thread (لرسم الشاشة واللمس)، و JS Thread (لتشغيل كود المنطق وريأكت)، و Shadow Thread (لحساب أبعاد ومواقع العناصر بمحرك Yoga).
الشرح
يعمل كود JavaScript بالكامل داخل خيط JS Thread المستقل. عندما يتغير التخطيط يتولى Shadow Thread الحسابات الهندسية دون تعطيل الـ JS Thread، بينما يظل Main Thread حرًا لمعالجة اللمس والرسوم الأصلية، ما لم يتم إرهاقه بحسابات ثقيلة. في المعمارية الجديدة (Fabric) يُحسب التخطيط في C++ ويمكن تنفيذه بشكل متزامن عند الحاجة، فلم يعد Shadow Thread منفصلًا بالصورة نفسها.
مثال بالكود
import { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
// JS thread: runs React and your logic
function onPress() {
setCount((c) => c + 1); // computes the new state
}
// UI (main) thread: a Reanimated worklet runs here, without waiting for the JS thread
const x = useSharedValue(0);
const style = useAnimatedStyle(() => ({
transform: [{ translateX: withSpring(x.value) }],
}));
// Under the New Architecture the layout (shadow tree) is computed in C++ and can be driven synchronously
// from the JS thread, while Android also uses a background thread for view-tree preparation.أخطاء شائعة
- تشغيل دوال متزامنة ثقيلة في كود الجافاسكربت مما يوقف استجابة الـ JS Thread لأحداث الواجهة.
أسئلة متابعة
- ما هو نظام Fabric وما الفرق بينه وبين نظام التصيير القديم في React Native؟
- ما هي معمارية React Native التقليدية (The Bridge) وما هي الاختناقات الأدائية المرتبطة بها؟