v19.2Latest

مقدمة

مُجمِّع React هو أداة جديدة تعمل في وقت البناء تقوم تلقائيًا بتحسين تطبيق React الخاص بك. يعمل مع JavaScript العادي، ويفهمقواعد React، لذا لا تحتاج إلى إعادة كتابة أي كود لاستخدامه.

سوف تتعلم
  • ما يفعله مُجمِّع React
  • البدء باستخدام المُجمِّع
  • استراتيجيات التبني التدريجي
  • تصحيح الأخطاء واستكشافها عند حدوث مشاكل
  • استخدام المُجمِّع على مكتبة React الخاصة بك

ماذا يفعل مُجمِّع React؟

يقوم مُجمِّع React تلقائيًا بتحسين تطبيق React الخاص بك في وقت البناء. غالبًا ما يكون React سريعًا بما يكفي دون تحسين، ولكن في بعض الأحيان تحتاج إلى حفظ المكونات والقيم يدويًا (memoize) للحفاظ على استجابة تطبيقك. هذا الحفظ اليدوي ممل، وسهل الخطأ فيه، ويضيف كودًا إضافيًا للصيانة. يقوم مُجمِّع React بهذا التحسين تلقائيًا نيابة عنك، مما يحررك من هذا العبء الذهني حتى تتمكن من التركيز على بناء الميزات.

قبل مُجمِّع React

بدون المُجمِّع، تحتاج إلى حفظ المكونات والقيم يدويًا لتحسين عمليات إعادة التصيير:

ملاحظة

هذا الحفظ اليدوي يحتوي على خطأ دقيق يكسر عملية الحفظ:

على الرغم من أنhandleClickتم تغليفه باستخدامuseCallback، فإن الدالة السهمية() => handleClick(item)تنشئ دالة جديدة في كل مرة يتم فيها تصيير المكون. هذا يعني أنItemستتلقى دائمًا خاصيةonClickجديدة، مما يكسر الحفظ.

يستطيع مُجمِّع React تحسين هذا بشكل صحيح مع أو بدون الدالة السهمية، مما يضمن أنItemيعاد تصييرها فقط عندما تتغيرprops.onClick.

بعد مُجمِّع React

مع مُجمِّع React، تكتب نفس الكود دون حفظ يدوي:

شاهد هذا المثال في ملعب مُجمِّع React

يطبق مُجمِّع React الحفظ الأمثل تلقائيًا، مما يضمن إعادة تصيير تطبيقك فقط عند الضرورة.

Deep Dive
ما نوع التخزين المؤقت الذي يضيفه React Compiler؟

هل يجب أن أجرب المترجم؟

نشجع الجميع على البدء في استخدام React Compiler. بينما لا يزال المترجم إضافة اختيارية لـ React اليوم، فقد تتطلب بعض الميزات في المستقبل المترجم لكي تعمل بشكل كامل.

هل من الآمن استخدامه؟

React Compiler أصبح الآن مستقرًا وتم اختباره على نطاق واسع في الإنتاج. بينما تم استخدامه في الإنتاج في شركات مثل Meta، فإن نشر المترجم للإنتاج لتطبيقك سيعتمد على صحة قاعدة الكود الخاصة بك ومدى اتباعكلقواعد React.

ما هي أدوات البناء المدعومة؟

يمكن تثبيت React Compiler عبرعدة أدوات بناءمثل Babel وVite وMetro وRsbuild.

React Compiler هو في الأساس غلاف خفيف لإضافة Babel حول المترجم الأساسي، والذي تم تصميمه ليكون منفصلاً عن Babel نفسه. بينما ستظل النسخة المستقرة الأولية من المترجم في المقام الأول إضافة Babel، فإننا نعمل مع فرق swc وoxcلبناء دعم من الدرجة الأولى لـ React Compiler حتى لا تضطر إلى إضافة Babel مرة أخرى إلى خطوط أنابيب البناء الخاصة بك في المستقبل.

يمكن لمستخدمي Next.js تمكين React Compiler الذي يستدعيه swc باستخدامv15.3.1وما فوق.

ماذا يجب أن أفعل بشأن useMemo وuseCallback وReact.memo؟

بشكل افتراضي، سيخزن React Compiler الكود الخاص بك مؤقتًا بناءً على تحليله واستدلالاته. في معظم الحالات، سيكون هذا التخزين المؤقت دقيقًا مثل ما قد تكون كتبته، أو أكثر دقة.

ومع ذلك، في بعض الحالات قد يحتاج المطورون إلى مزيد من التحكم في التخزين المؤقت. يمكن الاستمرار في استخدام خطافاتuseMemo و useCallbackمع React Compiler كوسيلة هروب لتوفير التحكم في القيم التي يتم تخزينها مؤقتًا. حالة استخدام شائعة لهذا هي إذا تم استخدام قيمة مخزنة مؤقتًا كاعتماد لتأثير، وذلك لضمان عدم تشغيل التأثير بشكل متكرر حتى عندما لا تتغير تبعياته بشكل ذي معنى.

بالنسبة للكود الجديد، نوصي بالاعتماد على المترجم للتخزين المؤقت واستخدامuseMemo/useCallbackحيثما يلزم لتحقيق تحكم دقيق.

بالنسبة للكود الحالي، نوصي إما بترك التخزين المؤقت الحالي في مكانه (إزالته يمكن أن تغير ناتج الترجمة) أو اختباره بعناية قبل إزالة التخزين المؤقت.

جرب React Compiler

سيساعدك هذا القسم على البدء مع React Compiler وفهم كيفية استخدامه بفعالية في مشاريعك.

موارد إضافية

بالإضافة إلى هذه الوثائق، نوصي بالاطلاع علىمجموعة عمل React Compilerللحصول على معلومات ومناقشات إضافية حول المترجم.

上一篇مترجم React下一篇التثبيت