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 !== '/' && }
    
  );
}

الميزات دي متاحة دلوقتي في النسخة التجريبية، وممكن كل حاجة تتغير في الآخر حسب الآراء والاستجابة المجتمعية.

المدونة

استكشف أقوى تقنيات Laravel الحديثة: Inertia.js، View Creators، وHLS خطوة بخطوة

يوليو 27, 2025

أدوات قوية تقدر تستخدمها لتطوير تطبيقات Laravel بشكل احترافي: Inertia.js v2، وView Creators، وحزمة Laravel HLS لبث الفيديوهات بأمان. ١. Inertia.j...

لارافيل 12.16.0 - مميزات جديدة للمطورين

يونيو 03, 2025

لارافيل 12.16.0 - مميزات جديدة للمطورين 1. قاعدات تحقق جديدة: in_array_keys دلوقتي تقدر تتحقق إن الأراي فيه على الأقل مفتاح واحد من اللي انت محددهم...

مكونات واجهة المستخدم والتفاعل الأساسية في React Native

يوليو 01, 2025

مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...

تاريخ React – استعراض شامل وتحليل تقني

يوليو 26, 2025

1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...

إزاي تستخدم Web Components ببساطة وذكاء

يوليو 06, 2025

إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...

الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 06, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...

The Ultimate Managed Hosting Platform