اعتماد الوضع المتزامن (تجريبي)

• Installation

  • Who Is This Experimental Release For?
  • Enabling Concurrent Mode

• What to Expect

  • Migration Step: Blocking Mode
  • Why So Many Modes?
  • Feature Comparison

تنصيب

يتوفر وضع التزامن فقط في الإنشاءات التجريبية في React. لتثبيتها، قم بتشغيل:

npm install react@experimental react-dom@experimental

لا توجد ضمانات الإدارة الدلالية لنُسخ البرمجيات في بناءات التجريبية. يمكن إضافة واجهات برمجة التطبيقات (APIs) أو تغييرها أو إزالتها مع أي إصدار @experimental.

الإصدارات التجريبية ستتضمن تغييرات متكررة.

يمكنك تجربة هذه الإنشاءات على المشاريع الشخصية أو في أحد الفروع، لكننا لا نوصي بتشغيلها في الإنتاج. في فيسبوك، نقوم بتشغيلها في الإنتاج، لكن ذلك لأننا أيضًا نقوم بإصلاح الأخطاء عندما ينتج عطب ما. لقد تم تحذيرك!

لمن يكون هذا الإصدار التجريبي؟

يهدف هذا الإصدار في المقام الأول إلى المتبنين في وقت مبكر، ومؤلفي المكتبات ، والأشخاص الفضوليين.

نحن نستخدم هذه الشفرة في الإنتاج (وهي مناسبة لنا) ولكن لا تزال هناك بعض الأخطاء والميزات المفقودة والفجوات في الوثائق. نود أن نسمع المزيد حول ما ينتج من مشاكل في الوضع المتزامن حتى نتمكن من إصلاحه لإصدار رسمي مستقر في المستقبل.

تمكين الوضع المتزامن

عادة، عندما نضيف ميزات إلى React ،يمكنك البدء في استخدامها على الفور. الأجزاء (Fragments) والسياق (Context) وحتى الخطافات (Hooks) هم أمثلة على هذه الميزات. يمكنك استخدام الشيفرة الجديد دون إجراء أي تغييرات على الشيفرة الموجود.

الوضع المتزامن مختلف. أنه يقدم تغييرات دلالية على كيفية عمل React. خلاف ذلك، فإن الميزات الجديدة الممكَّنة به لن تكون ممكنة. لهذا السبب تم تجميعهم في “وضع” جديد بدلاً من إصدار واحد تلو الآخر في عزلة.

لا يمكنك الاشتراك في الوضع المتزامن على أساس الشجرة الفرعية. بدلاً من ذلك، للاشتراك، يتعين عليك القيام بذلك في المكان الذي تقوم بنداء فيه اليوم بـ ReactDOM.render().

سيمكن هذا الوضع المتزامن للشجرة بأكملها <App/>:

import ReactDOM from 'react-dom';

// If you previously had:
//
// ReactDOM.render(<App />, document.getElementById('root'));
//
// You can opt into Concurrent Mode by writing:

ReactDOM.unstable_createRoot(
  document.getElementById('root')
).render(<App />);

ملاحظة:

واجهات برمجة التطبيقات للوضع المتزامن مثل createRoot الموجودة فقط في البناءات التجريبية لـ React.

في الوضع المتزامن، تعد أساليب دورة الحياة التي تم تمييزها مسبقًا كـ”غير آمنة” فعلا تكون غير آمنة، وتؤدي إلى الأخطاء أكثر مما كانت عليه React اليوم. لا نوصي بتجربة الوضع المتزامنة حتى يكون التطبيق متوافقًا مع Strict Mode.

ماذا تتوقع

إذا كان لديك تطبيق كبير موجود، أو إذا كان تطبيقك يعتمد على الكثير من حزم الطرف الثالث ، فالرجاء عدم توقع أنه يمكنك استخدام الوضع المتزامن على الفور. على سبيل المثال، في Facebook، نستخدم “الوضع المتزامن” لموقع الويب الجديد ، لكننا لا نخطط لتمكينه على الموقع القديم. وذلك لأن موقعنا القديم لا يزال يستخدم أساليب دورة حياة غير آمنة في شيفرة الإنتاج، مكتبات طرف ثالث غير متوافق، والأنماط التي لا تعمل بشكل جيد مع الوضع المتزامنة.

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

خطوة الترحيل: وضع الحظر

بالنسبة لقواعد الشفرات القديمة، قد يكون الوضع المتزامن خطوة بعيدة جدًا. هذا هو السبب في أننا نقدم أيضًا “وضع الحظر” الجديد في بناءات React التجريبية. يمكنك تجربتها عن طريق استبدال createRoot بـcreateBlockingRoot. إنه يقدم مجموعة صغيرة فقط من ميزات الوضع المتزامن، ولكنه أقرب إلى كيفية عمل React اليوم ويمكن أن يكون بمثابة خطوة ترحيل.

لكي نلخص:

• الوضع القديم: ReactDOM.render (<App /> ، rootNode). هذا هو ما تستخدمه تطبيقات React اليوم. لا توجد خطط لإزالة الوضع القديم في المستقبل الذي يمكن ملاحظته - لكنه لن يكون قادرًا على دعم هذه الميزات الجديدة.
• وضع الحظر: ReactDOM.createBlockingRoot(rootNode).render(<App/>). حاليا تحت التجربة. الغرض منه هو خطوة الترحيل الأولى للتطبيقات التي ترغب في الحصول على مجموعة فرعية من ميزات الوضع المتزامن.
• الوضع المتزامن: ReactDOM.createRoot(rootNode).render(<App/>). حاليا تحت التجربة. في المستقبل، بعد استقراره، نعتزم جعله وضع React الافتراضي. يتيح هذا الوضع جميع الميزات الجديدة.

لماذا العديد من الأوضاع؟

نعتقد أنه من الأفضل تقديم إستراتيجية ترحيل تدريجي بدلاً من إجراء تغييرات فادحة هائلة - أو السماح لـ React بالركود إلى غير ذي صلة.

من الناحية العملية، نتوقع أن تتمكن معظم التطبيقات التي تستخدم الوضع القديم من الانتقال إلى وضع الحظر على الأقل (إن لم يكن الوضع المتزامن). يمكن أن يكون هذا التجزئة مزعجًا بالنسبة للمكتبات التي تهدف إلى دعم جميع الأوضاع على المدى القصير. ومع ذلك، فإن نقل النظام الإيكولوجي تدريجياً بعيدًا عن Legacy Mode سيؤدي أيضًا إلى حل المشكلات التي تؤثر على المكتبات الرئيسية في نظام React، مثل مربكة سلوك Suspense عند قراءة التخطيط و عدم وجود ضمانات مجمعة متسقة. هناك عدد من الأخطاء التي لا يمكن إصلاحها في الوضع القديم دون تغيير الدلالات، ولكن لا توجد في أوضاع الحظر والتزامن.

يمكنك التفكير في وضع الحظر كإصدار “متدهور بأمان” من الوضع المتزامن. نتيجة لذلك، في المدى الطويل، يجب أن نكون قادرين على التقارب والتوقف عن التفكير في أوضاع مختلفة تمامًا. لكن في الوقت الحالي، تعد الوسائط استراتيجية ترحيل مهمة. يسمحون للجميع بتحديد متى يستحق الترحيل ، وترقيتهم وفقًا لسرعتهم الخاصة.

مقارنة الميزة

*: يحتوي الوضع القديم على مجموعة تلقائية في الأحداث التي تتم إدارتها بواسطة React، ولكنه يقتصر على مهمة المتصفح الواحيد. يجب أن تشترك الأحداث التي لا تتضمن React في استخدام unstable_batchedUpdates. في وضع الحظر و الوضع المتزامن، يتم تجميع جميع setState افتراضيًا.

**: تحذيرات فى عملية تطوير.