رد فعل البرنامج التعليمي الجزء 20: أول درس تقديم المشروط

اليوم ، في ترجمة الجزء التالي من البرنامج التعليمي React ، سنتحدث عن التقديم الشرطي.



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر

الدرس 36. التقديم الشرطي ، الجزء الأول

→ الأصل

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

سنقوم اليوم بتجربة تطبيق تم إنشاؤه باستخدام أدوات create-react-app ، في ملف App.js الذي يحتوي على الكود التالي:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

بالإضافة إلى ذلك ، في نفس المجلد الذي يوجد به ملف App.js ، يوجد ملف مكون Conditional.js بالمحتويات التالية:

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

في هذه المرحلة من العمل ، لن يعمل هذا التطبيق بعد ، في عملية تحليل المواد التي سنصلحها.

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

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

دعنا نتحدث عن الكود الذي سنختبره الآن. لدينا ، في ملف App.js ، مكون يستند إلى الفصل الدراسي. قام isLoading حالة تحتوي على خاصية isLoading لتعيين true . غالبًا ما يستخدم هذا التصميم في الحالات التي يكون فيها من الضروري ، على سبيل المثال ، تنفيذ الطلبات على واجهة برمجة تطبيقات معينة ، ولأنه في انتظار وصول البيانات وتوزيعها ، يجب عرض شيء ما على الشاشة. قد يستغرق الأمر 3-4 ثوانٍ لإكمال مكالمة واجهة برمجة التطبيقات ، ولا تريد أن يفكر المستخدم الذي ينظر إلى الشاشة في تعطل تطبيقك. نتيجة لذلك ، تمتلك الولاية خاصية تشير إلى ما إذا كان التطبيق يقوم حاليًا بإجراءات خدمة معينة. وسيتم استخدام العرض الشرطي لعرض شيء يخبر المستخدم أن التطبيق يقوم حاليًا بتحميل شيء ما في الخلفية.

يتضمن رمز مكون App طريقة componentDidMount() ، والتي سنناقشها قريبًا. في غضون ذلك ، انتبه إلى طريقة render() . نحن هنا نخرج مكون Condition ، والذي يتم استيراده في الكود الموجود أعلى ملف App.js isLoading تمرير المكون isLoading إلى هذا المكون ، والذي يمثل القيمة الحالية لخاصية isLoading من حالة مكون App . لا يعرض رمز المكون Conditional أي شيء يمكن عرضه على الشاشة ، وسنتعامل مع هذا المكون في وقت لاحق قليلاً. في غضون ذلك ، دعنا نعود إلى طريقة componentDidMount() من رمز مكون App .

تذكر أن طريقة componentDidMount() تسمح لنا بتنفيذ بعض التعليمات البرمجية مباشرة بعد عرض المكون ، في حالتنا هو مكون App . في رمز هذه الطريقة ، نحاكي نداء إلى واجهة برمجة تطبيقات معينة. نحن هنا ضبط الموقت لمدة ثانية ونصف. عندما يمر هذا الوقت ، سيتم إطلاق رمز الوظيفة الذي تم تمريره إلى setTimeout() . في هذه الوظيفة ، استنادًا إلى الافتراض بأن مكالمتها ترمز إلى نهاية تحميل البيانات من واجهة برمجة التطبيقات ، يتم إجراء تغيير للحالة. وهي ، يتم تعيين الخاصية isLoading إلى false . يشير هذا إلى اكتمال تنزيل البيانات ، وبعد ذلك يمكن للتطبيق العمل بشكل طبيعي. في الفصول المستقبلية ، سنتحدث عن استخدام دالة fetch() لتحميل البيانات ، وسنقتصر في الوقت الحالي على المحاكاة أعلاه لهذه العملية.

بالمناسبة ، سيكون من المناسب هنا مرة أخرى إثارة موضوع أساليب دورة حياة المكون. الحقيقة هي أنه بمجرد isLoading خاصية حالة isLoading من true إلى false ، يتلقى المكون Conditional قيمة خاصية جديدة. أولاً ، في المرة الأولى التي يتم فيها عرض المكون ، يتلقى ، في خاصية isLoading ، true ، ثم ، بعد تغير الحالة ، يتلقى نفس الخاصية ذات القيمة الجديدة. في الواقع ، عندما تتغير الحالة ، يتم استدعاء طريقة render() مرة أخرى ، ونتيجة لذلك ، سيتم أيضًا عرض المكون Conditional مرة أخرى. تذكر أن Conditional هو مكون وظيفي عادي ، أي أن إعادة العرض تعني الاستدعاء المتكرر للوظيفة التي يتم تقديمها إليها. لكن ما نعود من هذه الوظيفة عندما نعيد تقديم المكون قد يختلف عما تم إرجاعه سابقًا. سبب هذا التغيير هو التغيير في ما ننقله إلى المكون.

لذلك ، يقبل المكون isLoading خاصية isLoading . قبل أن نبدأ العمل على الكود ، سوف نتحقق مما إذا كانت تلك الآليات الموجودة بالفعل تعمل أم لا. للقيام بذلك ، سنقوم بإرجاع بعض العلامات من المكون وعرض القيمة props.isLoading في وحدة التحكم. بعد ذلك ، سيبدو رمز المكون كما يلي:

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

ستبدو صفحة التطبيق بعد ذلك كما هو موضح في الشكل التالي.


صفحة التطبيق في المتصفح

يرجى ملاحظة أن يتم عرض true في وحدة التحكم مباشرة بعد تحميل التطبيق ، false - بعد 1.5 ثانية. هذا بسبب تشغيل الآلية أعلاه في طريقة componentDidMount() لمكون App .

الآن دعونا نتحدث عن التقديم الشرطي. يكمن جوهرها في حقيقة أننا لا نعرض شيئًا ما على الشاشة إلا في حالة استيفاء شرط معين. في هذه الحالة ، بدلاً من عرض السلسلة Temp على الصفحة ، يمكننا ، في المكون Conditional ، التحقق من قيمة props.isLoading ، وإذا كان هذا true ، props.isLoading بعرض النص Loading... على الصفحة. إذا كانت هذه القيمة false ، مما يشير إلى نهاية التنزيل ، فيمكنك إرجاع نص آخر من المكون. في الكود ، سيبدو كما يلي:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

حاول تشغيل هذا الرمز في منزلك ، وقم بتحديث الصفحة وشاهد كيف ، عندما يتم تحميل الصفحة ، يتم عرض نص واحد ، وبعد فترة - آخر.

نظرًا لميزات JavaScript ، يمكننا تبسيط الرمز أعلاه كما يلي:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

إذا كانت الحالة المحددة في كتلة if صحيحة ، return في هذه الكتلة ، وبعدها ستكمل الوظيفة. إذا كانت الحالة خاطئة ، فإن تعبير return من هذه الكتلة غير راض وتُرجع الدالة ما هو محدد في return الثانية من الوظيفة.

الآن دعونا نتحدث عن كيف يمكنك حل مشاكل التقديم الشرطي باستخدام عامل التشغيل الثلاثي . هذه البنية موجودة في JavaScript لفترة طويلة جدًا. غالبًا ما يستخدم في React لحل مهام التقديم الشرطي. إليك ما يبدو عليه:

  ? 1 : 2 

يتم إرجاع قيمة التعبير 1 إذا كان الشرط صحيحًا ، يتم إرجاع قيمة التعبير 2 إذا كانت الحالة خاطئة.

في حالتنا ، باستخدام عامل التشغيل الثلاثي ، يمكن إعادة كتابة رمز المكون Conditional على النحو التالي:

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

هذا التصميم ، على الرغم من أنه يعمل ، يبدو غير عادي. والحقيقة هي أن المكونات عادة ما تعود تصاميم أكثر تعقيدا. لذلك ، لف كل شيء في عنصر <div> :

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

تعمل هذه الشفرة أيضًا ، على الرغم من أنها لم تعد كما يجب. كل ما تم تضمينه في <div&gtl; . لإصلاح هذا الأمر ، نذكر أن تصميمات JS المستخدمة في الترميز التي تم إرجاعها من المكونات يجب أن تكون محاطة بأقواس وأعد كتابة الكود وفقًا لذلك:

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

الآن كل شيء يعمل كما ينبغي مرة أخرى.

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

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

علاوة على ذلك ، فإن التواجد في الترميز الذي تم إرجاعه بواسطة مكون العناصر الإضافية لا يتعارض مع آليات التقديم الشرطي. بالإضافة إلى ذلك ، سيتم عرض هذه العناصر على حد سواء عندما يكون props.isLoading true ، وعندما تكون هذه الخاصية false .

يستند تحسين آخر يمكن إدخاله على هذا الرمز إلى حقيقة أنه نظرًا لأن props.isLoading عبارة عن خاصية منطقية تأخذ القيمة true أو false ، فيمكن استخدامها مباشرةً دون استخدام عامل مقارنة صارم مع true . والنتيجة هي ما يلي:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

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

بالإضافة إلى ذلك ، تجدر الإشارة إلى أنه يوجد هنا كل منطق التقديم الشرطي داخل طريقة التقديم render() للمكون الوظيفي ، والتي تم إجراؤها فقط لإظهار الشفرة المدمجة التي تم تجميعها في مكان واحد. ولكن ، على الأرجح ، يجب أن يكون مكون App مسؤولاً عن التقديم الشرطي ، ويجب أن يعرض المكون المماثل للمكون Conditional ببساطة ما تم تمريره إليه. إذا كان مكون App مسؤولاً عن معرفة ما إذا كان هناك شيء يتم تحميله في وقت معين ، وعند اكتمال هذه العملية ، فمن المرجح أن يكون مسؤولاً عن تحديد ما يجب عرضه على الصفحة. هذا هو ، في حالتنا ، يمكن إعادة تنظيم الكود عن طريق التحقق من خاصية isLoading في طريقة isLoading render() لمكون App وعرض النص مثل Loading... في حالة عدم اكتمال التنزيل ، أو عرض مكون مشابه للمكون Conditional في إذا اكتمل التنزيل. في الوقت نفسه ، قد لا يقبل المكون Conditional خصائص من App ، ويعرض فقط ما يجب أن يخرجه في أي حال.

إليك ما يبدو عليه رمز مكون التطبيق ، والذي تم تحويله وفقًا لهذه الاعتبارات:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

وهنا هو الكود المحدث للمكون Conditional ، والذي لا يوجد فيه الآن تحقق من أي شروط:

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

هنا ، مع ذلك ، أزلنا شريط التنقل و "الطابق السفلي" ، لكن هذا ليس مهمًا في هذه الحالة.

ملخص

في هذا الدرس ، حدثت أول مقدمة لتقنيات التقديم الشرطي. في المرة القادمة سوف نستمر في التعامل معهم. على وجه الخصوص ، سيكون لديك درس ثانٍ حول التقديم الشرطي والعمل العملي في هذا الموضوع.

أعزائي القراء! إذا كنت تقوم بتطوير تطبيقات React ، فنحن نطلب منك إخبارنا بكيفية إجراء العرض الشرطي.