نسختان وسلوك واحد

لوحة المعلومات نفسها مكتوبة مرتين من مواصفة واحدة: مرة بـ React ومرة دون أي إطار عمل. اختر سيناريو فتشغّله النسختان في اللحظة نفسها، هنا في متصفحك.

هل تتصرفان بالطريقة نفسها؟

بانتظار بدء النسختين.

الخطوة هي أي شيء يمكن أن يلاحظه شخص: طلب، أو تغيّر في الحالة، أو مرحلة تحميل، أو إعلان، أو نقل للتركيز. التوقيت لا يُحتسب؛ يجب أن يتطابق الترتيب والمحتوى.

React

React 19 مع hooks وreducer

جاهزة خلال: جارٍ القياس…
JavaScript المُنزَّل: جارٍ القياس…
الخطوات في هذا التشغيل: 0

آخر إعلان: لا شيء بعد

لوحة المفاتيح وقارئ الشاشة على هذه النسخة.

TypeScript دون إطار عمل

دون إطار عمل ودون اعتماديات وقت التشغيل

جاهزة خلال: جارٍ القياس…
JavaScript المُنزَّل: جارٍ القياس…
الخطوات في هذا التشغيل: 0

آخر إعلان: لا شيء بعد

لوحة المفاتيح وقارئ الشاشة على هذه النسخة.

قِيس في متصفحك خلال هذه الزيارة، والنسختان تُحمَّلان في الوقت نفسه. تتغير الأرقام بحسب الجهاز والشبكة والذاكرة المؤقتة؛ أعد تحميل الصفحة للقياس من جديد.

عند البناء

حجم الشيفرة والاعتماديات لكل نسخة، محسوبة عند بناء هذه الصفحة.
المقياس	React	TypeScript دون إطار عمل
أسطر الشيفرة (غير الفارغة)	1,063	1,061
ملفات الشيفرة	14	8
اعتماديات وقت التشغيل	`react, react-dom`	لا شيء

أين كانت كتابة كل نسخة أصعب

ما تحصل عليه نسخة مجانًا واضطرت الأخرى إلى صنعه يدويًا.
الموضوع	React	TypeScript دون إطار عمل
الحفاظ على الترتيب وطرق العرض	مجانًا: تبقى حالة المكوّن بعد تحديث البيانات.	كائن ذاكرة صغير يحفظها أثناء إعادة بناء المحتوى.
الحفاظ على تركيز لوحة المفاتيح	مجانًا: الزر المعاد عرضه هو العنصر نفسه.	تحمل عناصر التحكم القابلة لإعادة البناء مفتاحًا، ويعود التركيز إلى العنصر المطابق.
تشغيل مؤقتات التحميل في وقتها	يحتاج إلى useLayoutEffect، وإلا بدأ مؤقت 300 ms متأخرًا بإطار.	تُشغَّل مباشرة في المهمة نفسها التي يتم فيها العرض.
حجم التنزيل	بيئة تشغيل React هي معظم الحزمة.	تُرسل لوحة المعلومات نفسها فقط.