انسَ Radix UI: دليل الانتقال إلى Base UI لمشاريع React في عام 2026

عمر التكنولوجيا أقصر مما نعتقد. وتعد Radix UI، التي هيمنت على نظام React البيئي لسنوات، مثالاً بارزاً على ذلك. اعتباراً من عام 2026، انخفض معدل التحديثات في مستودع Radix UI Primitives إلى أقل من 0.5 مرة أسبوعياً في المتوسط، مما يجعلها في حالة موت سريري فعلياً. وفي المقابل، فإن Base UI، التي أنشأها المصممون الأساسيون لـ Radix بعد انضمامهم إلى فريق MUI، تضخ أكثر من 25 تحديثاً يومياً. الأمر ليس مجرد صيحة عابرة، بل هو مسألة بقاء.

لماذا تُعد Base UI المعيار الجديد؟

في الماضي، كنا متحمسين لنمط asChild في Radix. ولكن في التطبيق العملي، كان هذا النمط يشكل صداعاً؛ فبسبب استخدامه لـ cloneElement داخلياً، كانت تصادمات الخصائص (Props) متكررة، وكان استنتاج أنواع TypeScript دائماً غير مستقر.

واجهت Base UI هذا التحدي مباشرة باستخدام نمط Render Props. لا يقتصر الأمر على تغيير في بناء الجملة فحسب، بل يعمل على تحسين الأداء من خلال تقليل عبء وقت التشغيل (Runtime Overhead) ويمنح المطور تحكماً بنسبة 100% في الخصائص التي يتم تمريرها إلى العناصر الفرعية.

1. انتصار الـ Render Props الصريح

في Base UI، يمكنك استقبال الحالة الداخلية للمكون كمعاملات (Arguments) مباشرة داخل دالة الرندر. لا داعي لربط الخطافات (Hooks) الخارجية بشكل فوضوي كما في Radix.

• أمان النوع (Type Safety): من خلال Generics، يتم استنتاج البيانات التي يجب أن يستقبلها العنصر الفرعي بدقة.
• الأداء: تم اختيار أسلوب استدعاء الدالة المباشر بدلاً من cloneElement الذي ينصح فريق React بتجنبه.

2. التشريعات القانونية وأداء SSR

أصبحت معايير قانون إمكانية الوصول الأوروبي (EAA) و WCAG 2.2، التي دخلت حيز التنفيذ في عام 2026، إلزامية وليست اختيارية. تحافظ Base UI على سمات ARIA متسقة في بيئات الرندر من جهة الخادم (SSR)، مما يمنع انزياح التخطيط (Layout Shift) أثناء عملية الـ Hydration ويحسن أداء وقت التفاعل الأولي (TTI) بشكل كبير.

التطبيق العملي: استراتيجية التعامل مع 10,000 عنصر بيانات

أكثر المهام إرهاقاً في بيئات الشركات الكبرى هي تنفيذ مكونات Multi-select أو Combobox. كانت Radix تفتقر إلى مثل هذه المكونات عالية الأداء، مما كان يضطرنا دائماً لإضافة مكتبات خارجية بشكل عشوائي.

تدعم Base UI وظائف الاختيار المتعدد بشكل أصلي. كما أنها تتكامل بسلاسة مع مكتبات المحاكاة الافتراضية مثل @tanstack/react-virtual؛ حيث تظهر قيمتها الحقيقية عند التعامل مع كميات ضخمة من البيانات.

الإدارة التصريحية للتنسيق

يصبح نمط Function as ClassName في Base UI في غاية القوة عند دمجه مع Tailwind CSS. يمكنك إدارة التنسيقات بشكل تصريحي بدلاً من استخدام العمليات الشرطية الثلاثية المعقدة.

typescript <Select.Item className={(state) =>
flex items-center px-4 py-2 rounded-lg
${state.highlighted ? 'bg-indigo-50 text-indigo-900' : 'text-slate-700'}
${state.selected ? 'font-semibold bg-indigo-100' : 'font-normal'}
${state.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
`}

{item.label}
</Select.Item>

`

خارطة طريق هجرة ناجحة

تغيير الكود بالكامل دفعة واحدة هو عمل انتحاري؛ لذا نحتاج إلى نهج تدريجي واستراتيجي.

المرحلة الأولى: التعايش
حافظ على Radix UI الحالية وقم بتثبيت npm install @base-ui-components/react للعمل بجانبها.

المرحلة الثانية: تطبيق الميزات الجديدة أولاً
ابدأ بتبني Base UI في النوافذ المنبثقة (Modals) أو النماذج المعقدة المضافة حديثاً. يجب إعطاء أعضاء الفريق وقتاً للاعتياد على نمط Render Props.

المرحلة الثالثة: استبدال نظام التصميم الأساسي
قم باستبدال التنفيذ الداخلي للمكونات المشتركة في نظام التصميم بـ Base UI فقط. من خلال الحفاظ على واجهات API الخارجية، يمكنك تحديث البنية التحتية دون المساس بكود الفرق الأخرى.

عنصر المقارنة	Radix UI	Base UI
الآلية الأساسية	حقن الخصائص عبر cloneElement	استدعاء دالة Render Props
التحكم في الخصائص	منخفض (المكتبة تقود)	مرتفع (المطور يمرر مباشرة)
الوصول إلى الحالة	يتطلب Hooks خارجية	حقن فوري كمعاملات لدالة الرندر
حالة الصيانة	متوقفة فعلياً (بحلول 2026)	نشطة جداً (بقيادة فريق MUI)

نحو بنية تحتية مستدامة

بدأت التحديثات الأخيرة لـ shadcn/ui بالفعل في اعتماد Base UI كمكونات أولية (Primitives) أساسية. لقد انتقلت ريادة السوق تماماً. الديون التقنية تراكم الفوائد كلما تم تجاهلها. الابتكار الذي قدمته Radix UI تطور الآن إلى شكل أكثر اكتمالاً في Base UI.

تعد القابلية للصيانة والالتزام بمعايير إمكانية الوصول من المهارات التنافسية الجوهرية لمطوري الواجهات الأمامية في عام 2026. حان الوقت للانتقال إلى أدوات أكثر وضوحاً وتركيزاً على الأداء. لا ينبغي لمشاريع 2026 أن تظل أسيرة لإرث الأمس.