تابع تعلم رياكت React الجزء 7

تُستخدم الكلمة الأساسية "التبديل" لعرض مسار واحد فقط ليتم عرضه بين المسارات العديدة المحددة. يتم استخدام المكون <Switch> لعرض المكونات فقط عندما يتم مطابقة المسار. خلاف ذلك ، فإنه يعود إلى المكون غير موجود.

42-كيف تستخدم الأنماط فيstyles  React؟

يمكننا استخدام سمة النمط للتصميم في تطبيقات React ، والتي تضيف أنماطًا محسوبة ديناميكيًا في وقت العرض. يقبل كائن JavaScript في خصائص camelCased بدلاً من سلسلة CSS. تتوافق سمة النمط مع الوصول إلى الخصائص الموجودة على عقد DOM في JavaScript.

مثال

const divStyle = { 

  color: 'blue', 

  backgroundImage: 'url(' + imgUrl + ')' 

}; 

function HelloWorldComponent() { 

  return <div style={divStyle}>Hello World!</div> 

} 

43-كم عدد الطرق التي يمكننا بها تصميم مكون React؟

يمكننا تصميم مكون React بأربع طرق أساسية ، وهي معطاة أدناه:

·        التصميم المضمن

·        ورقة أنماط CSS

·        وحدة CSS

·        المكونات المصممة

44- شرح تصميم وحدة CSS في React.

CSS Module هو ملف CSS حيث يتم تحديد جميع أسماء الفئات وأسماء الرسوم المتحركة محليًا بشكل افتراضي. إنه متاح فقط للمكون الذي يستورده ، وبدون إذنك ، لا يمكن تطبيقه على أي مكونات أخرى. يمكنك إنشاء ملف CSS Module بامتداد .module.css.

45- ما هي المكونات المصممة؟

Styled-Components هي مكتبة لـ React. إنه خليفة CSS Modules. يستخدم CSS المحسن لتصميم أنظمة مكونات React في تطبيقك ، والذي تمت كتابته بمزيج من JavaScript و CSS. يتم تحديد النطاق لمكون واحد ولا يمكن أن يتسرب إلى أي عنصر آخر في الصفحة.

توفر المكونات المصممة:

·        CSS التلقائي الحرج

·        لا توجد فئة البق اسم

·        حذف أسهل لـ CSS

·        تصميم ديناميكي بسيط

·        صيانة غير مؤلمة

46- ما هي المشاكل الرئيسية في إطار MVC؟

المشاكل الرئيسية في إطار عمل MVC هي:

·        كان التلاعب في DOM مكلفًا للغاية.

·        يجعل التطبيق بطيئًا وغير فعال.

·        كان هناك هدر كبير للذاكرة.

·        يجعل من الصعب تصحيح أخطاء التطبيق.

47- شرح مفهوم الجريان.flux

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

48- ما هو Redux؟

Redux هي مكتبة JavaScript مفتوحة المصدر تُستخدم لإدارة حالة التطبيق. يستخدم React Redux لبناء واجهة المستخدم. من السهل اختبار تطبيق Redux ويمكن تشغيله في بيئات مختلفة تظهر سلوكًا ثابتًا. تم تقديمه لأول مرة بواسطة دان أبراموف وأندرو كلارك في عام 2015.

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

49- ما هي المبادئ الثلاثة التي يتبعها Redux؟

المبادئ الثلاثة التي يتبعها redux هي:

1. مصدر واحد للحقيقة: يتم تخزين حالة التطبيق بالكامل في شجرة كائن / حالة داخل متجر واحد. تسهل شجرة الدولة الواحدة الاحتفاظ بالتغييرات بمرور الوقت. كما أنه يجعل من السهل تصحيح أخطاء التطبيق أو فحصه.

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

3. يتم إجراء التغييرات بوظائف خالصة: لتحديد كيفية تحويل الإجراءات لشجرة الحالة ، تحتاج إلى كتابة مخفضات (وظائف خالصة). تأخذ الوظائف البحتة الحالة السابقة والعمل كمعامل وتعيد دولة جديدة.