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 !== '/' && }
);
}
الميزات دي متاحة دلوقتي في النسخة التجريبية، وممكن كل حاجة تتغير في الآخر حسب الآراء والاستجابة المجتمعية.
المدونة
تعزيز PHP Enums باستخدام archtechx/enums
يوليو 01, 2025
تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP 8.1، ظهر نوع جديد اسمه “enums” بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...
حلل مشروع Laravel بـ Introspect
يوليو 01, 2025
حلل كود Laravel باستخدام Laravel Introspect لو بتعمل Refactor كبير أو بتبني أدوات Dev، Laravel Introspect بيسمحلك تستعلم عن الكود: فيوز، مودلز، رو...
تحديث Laravel 12.18.0
يونيو 17, 2025
تحديث Laravel 12.18.0 صدر نسخه Laravel 12.18.0 فيها شوية ميزات جامدة كده: توابع لتشفير وفك تشفير النصوص باستخدام Stringable ديركت في chain strings...
نظام طوابير Laravel واستخدام Supervisor في الإنتاج
يوليو 01, 2025
🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...
أحدث مميزات ECMAScript 2025
يونيو 30, 2025
أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...
React Labs: View Transitions وActivity
يونيو 17, 2025
React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...
