ما هو مفهوم الـ Shared Values في Reanimated وكيف تختلف عن useState؟

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

الـ Shared Values تحتفظ ببيانات رقمية حركية قابلة للتعديل والوصول المتزامن من كلا الخيطين (JS و UI)، وتعديلها لا يطلق دورة إعادة تصيير (Re-render) في شجرة ريأكت بل يغير عقد الرسم مباشرة.

الشرح

يتم إنشاء القيمة المشتركة عبر useSharedValue(initialValue). عندما تتغير sharedValue.value، لا يقوم ريأكت بتشغيل دالة المكون من جديد كما في useState، بل يتم تحديث خاصية الرسم فورياً على خيط الـ UI من خلال useAnimatedStyle، مما يضمن أداء 120 إطاراً في الثانية دون أي استهلاك لمعالج الـ JS.

مثال بالكود

const progress = useSharedValue(0);

const handlePress = () => {
  // تحديث حركي مرن بدون أي re-render
  progress.value = withSpring(1);
};

أخطاء شائعة

• محاولة قراءة أو كتابة sharedValue.value مباشرة داخل مرحلة الـ Render لدالة المكون.

أسئلة متابعة

• كيف تدمج React Native Gesture Handler (RNGH) مع Reanimated لبناء تفاعلات إيماءات لمسية فورية؟
• ما هي حركات العناصر المشتركة (Shared Element Transitions) بين الشاشات وكيف تنفذها؟

المصادر

• Reanimated docs — useSharedValue