تم إطلاق الإصدار React v18 الذي طال انتظاره أخيرًا قبل بضعة أشهر. على الرغم من عدم وجود تغييرات كبيرة ، فقد تمت إضافة بعض الميزات المثيرة للاهتمام والتي تستحق إلقاء نظرة عليها. ستتناول هذه المقالة بعض الإضافات الجديدة وكيفية الترقية إلى React v18.
كيفية الترقية إلى React 18
لتثبيت أحدث إصدار من React ، قم بتشغيل هذا الأمر في Terminal:
npm تثبيت رد فعل رد دومأو إذا كنت تستخدم الغزل:
إضافة الغزل رد فعل رد فعل دومبمجرد تثبيت أحدث إصدار ، يمكنك البدء في الاستفادة من ميزاته الجديدة.
هناك العديد من الإضافات في React 18 ؛ فيما يلي أربعة من أبرزها.
1. الوضع الصارم
StrictMode هي ميزة يمكنك استخدامها لتسليط الضوء على المشاكل المحتملة في التطبيق. يتم تشغيل فحوصات الوضع الصارم في وضع التطوير فقط ولن تؤثر على بنية الإنتاج. ومع ذلك ، يمكن أن تكون مفيدة جدًا في تحديد المشكلات المحتملة في التعليمات البرمجية الخاصة بك.
يمكنك تمكين الوضع المتشدد لأي جزء من التطبيق الخاص بك. على سبيل المثال ، يمكنك تمكينه لجميع مكوناتك ، أو لبعضها فقط.
يستورد تتفاعل من 'تتفاعل'؛
وظيفةمثال تجريبي() {
إرجاع (
<شعبة>
<المكوِّن الأول />
<تتفاعل. الوضع الصارم>
<المكون الثاني />
<المكون الثالث />
</React.StrictMode>
<المكون الرابع />
</div>
);
}
في الكود أعلاه ، سيتم فحص المكونات الأربعة بحثًا عن المشكلات المحتملة. ومع ذلك ، لن يتم تطبيق فحوصات الوضع المتشدد إلا على ملف و .
يساعد StrictMode أيضًا بطرق أخرى ، مثل:
- تحديد المكونات ذات دورات الحياة غير الآمنة: إذا كان للمكون طريقة دورة حياة تم تمييزها على أنها غير آمنة ، فسوف يحذرك الوضع المتشدد من ذلك.
- تحذير حول استخدام واجهة برمجة تطبيقات مرجع السلسلة القديمة: إذا كنت تستخدم واجهة برمجة تطبيقات مرجع السلسلة القديمة ، فسيحذرك الوضع الصارم من استخدامه.
- تحذير حول استخدام findDOMNode المتوقف: إذا كنت تستخدم findDOMNode API ، فسيحذرك الوضع المتشدد من ذلك.
- الكشف عن الآثار الجانبية غير المتوقعة: إذا تسبب أحد المكونات في حدوث آثار جانبية (مثل setState) في أماكن غير متوقعة ، فسيحذرك الوضع المقيد من ذلك.
- اكتشاف واجهة برمجة تطبيقات السياق القديمة: إذا كنت تستخدم واجهة برمجة تطبيقات السياق القديمة (والتي تم إيقافها الآن) ، فسيحذرك الوضع المتشدد من ذلك.
- ضمان حالة قابلة لإعادة الاستخدام: إذا كانت لديك حالة يتم استخدامها بواسطة مكونات متعددة ، فإن الوضع المتشدد سيساعد في ضمان مزامنتها بشكل صحيح.
بشكل عام ، يمكن أن يكون الوضع المتشدد ميزة مفيدة في التطوير للمساعدة في تحديد المشكلات المحتملة في التعليمات البرمجية الخاصة بك.
2. الانتقالات
تتيح لك الانتقالات وضع علامة على تحديثات معينة لواجهة المستخدم على أنها غير عاجلة. هذا يعني أن React يمكنها إعطاء الأولوية للتحديثات الأخرى الأكثر أهمية.
على سبيل المثال ، إذا كان لديك حقلين نصيين - أحدهما لاستعلام البحث والآخر لنتائجه - فأنت تريد وضع علامة على حقل نص نتائج البحث على أنه انتقال. بهذه الطريقة ، تعرف React أنها لا تحتاج إلى إعادة عرض حقل النص هذا بشكل عاجل في كل مرة يكتب فيها المستخدم شيئًا ما في حقل نص استعلام البحث.
يمكنك استخدام وظيفة startTransition لتمييز تحديث واجهة المستخدم على أنه انتقال. هذا مثال:
يستورد {startTransition} من 'تتفاعل'؛
startTransition (() => {
// قم بتمييز أي تحديثات حالة غير عاجلة بالداخل على أنها انتقالات
});
سيحدد هذا الرمز جميع تحديثات الحالة داخل وظيفة startTransition على أنها انتقالات. بهذه الطريقة ، يمكن لـ React التركيز على تحديثات أخرى أكثر أهمية لواجهة المستخدم.
3. التجميع التلقائي
توفر React ميزة مفيدة تسمى التجميع والتي تقلل من عدد عمليات إعادة العرض التي تحدث عندما تتغير الحالة. يمكن أن يكون هذا مفيدًا جدًا في تحسين الأداء ، لا سيما عندما العمل مع رمز غير متزامن.
في السابق ، إذا كان لديك وعد أو كنت تجري مكالمة شبكة ، فلن يتم تجميع تحديثات الحالة ، وسيتعين على React إعادة العرض عدة مرات. ومع ذلك ، مع التجميع التلقائي في React 18 ، يتم تجميع جميع تحديثات الحالة ، حتى ضمن الوعود ، و setTimeouts ، وعمليات رد نداء الأحداث. هذا يقلل بشكل كبير من العمل الذي يتعين على React القيام به في الخلفية.
يمكنك تجميع تحديثات الحالة يدويًا باستخدام وظيفة flushSync ، ولكن اعتبارًا من React 18 ، أصبحت هذه العملية الآن تلقائية. ينتج عن هذا أداء أفضل بكثير ، حيث ستنتظر React انتهاء مهمة صغيرة قبل إعادة تصييرها.
4. خطاف جديد
الإصدار 18 يقدم العديد من الجديد رد فعل الخطافات، بما في ذلك useId و useTransition و useDefirmedValue. توفر هذه الخطافات الجديدة طريقة رائعة لإضافة وظائف إضافية لتطبيقات React بأقل جهد.
يوفر React 18 أداءً متزايدًا للتطبيق
React 18 موجود هنا ، وهو يجلب معه بعض التحسينات الرائعة على أداء تطبيقات الويب. باستخدام الإصدار الجديد من React ، يمكنك بسهولة إنشاء تطبيقات ويب أكثر استجابة وأفضل أداءً بشكل عام. لذا ، إذا كنت تبحث عن إنشاء تطبيق ويب يعمل بسلاسة ويبدو رائعًا ، فتأكد من إطلاعك على React 18.
