React Labs: View Transitions وActivity

يونيو 17, 2025

React 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&nbsp;8.1، ظهر نوع جديد اسمه &ldquo;enums&rdquo; بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي 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 &amp; 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&nbsp;Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...

The Ultimate Managed Hosting Platform