React Labs: View Transitions وActivity
يونيو 17, 2025React Labs: View Transitions وActivity
المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن في حزمة react@experimental وreact‑dom@experimental:
- View Transitions: ببساطة بتلف الـ UI جوا
<ViewTransition>علشان تشغّل أنيميشنات باستخدام API جديد اسمهstartViewTransition. ممكن تفعلها لما تستخدمstartTransitionأوuseDeferredValueأو<Suspense>. والـ CSS ممكن يتحكم في شكل الحركة باستخدام الـ pseudo-selectors زي::view-transition-old(*)و::view-transition-new(*). - Activity: الكومبوننت دي بتحافظ على حالة الجزء المخفي من الصفحة من غير ما يكرّر الـ render أو يضيع الستيت. الكود بيبقى كده:
<Activity mode={isVisible ? 'visible' : 'hidden'}>. لو مخفي، بيفصل الـ effects لكن بيحتفظ بالستيت علشان لو المستخدم رجع تاني يبقى زي ما سيبه.
وكمان شغالين على شوية حاجات تانية:
- مقاييس مباشرة في Performance Profiler.
- المترجم بيدخل dependencies بتاعة useEffect أوتوماتيك.
- Extension للمحرر (IDE) يعتمد على الكومبايلر للكشف الأذكى عن الأخطاء.
- ref للـ Fragment علشان تجمع أكتر من عنصر DOM.
- أنيميشن بالإيماءات (زي السحب للفتح).
- API جديد للـ external stores باستخدام
use(store).
مثال: View Transition بسيط
import { unstable_ViewTransition as ViewTransition } from 'react';
export default function App({ url }) {
return (
{url === '/' ? : }
);
}
مثال: سنّ الحالة باستخدام Activity
import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from 'react';
export default function App({ url }) {
return (
{url !== '/' && }
);
}
الميزات دي متاحة دلوقتي في النسخة التجريبية، وممكن كل حاجة تتغير في الآخر حسب الآراء والاستجابة المجتمعية.
المدونة
أغسطس 09, 2025
البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...
يوليو 13, 2025
في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...
يوليو 01, 2025
🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...
يوليو 01, 2025
مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...
يونيو 17, 2025
React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...
يوليو 20, 2025
دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...