رد فعل البرنامج التعليمي الجزء 11: تشكيل العلامات الديناميكية وطريقة صفيف الخريطة

في جزء اليوم من ترجمة دورة React التدريبية ، سنتحدث عن استخدام طريقة الصفيف map () القياسية لتنظيم التكوين الديناميكي لعلامة JSX التي تصف مجموعات من العناصر من نفس النوع.



→ الجزء 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: مشروع المقرر

الدرس 21. طريقة إنشاء العلامات الديناميكية وخريطة المصفوفات

→ الأصل

سنواصل العمل من اللحظة التي توقفنا فيها عند الانتهاء من المهمة العملية السابقة. تذكر أنه بعد ذلك بدا رمز ملف App.js كما يلي:

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." />                     <Joke               question="What's the best thing about Switzerland?"               punchLine="I don't know, but the flag is a big plus!"           />                     <Joke               question="Did you hear about the mathematician who's afraid of negative numbers?"               punchLine="He'll stop at nothing to avoid them!"           />                     <Joke               question="Hear about the new restaurant called Karma?"               punchLine="There's no menu: You get what you deserve."           />                     <Joke               question="Did you hear about the actor who fell through the floorboards?"               punchLine="He was just going through a stage."           />                     <Joke               question="Did you hear about the claustrophobic astronaut?"               punchLine="He just needed a little space."           />                 </div>   ) } export default App 

يعرض مكون App مجموعة من مكونات Joke . هذه هي الطريقة التي تبدو بها صفحة التطبيق في هذه المرحلة من العمل.


صفحة التطبيق

يتم تمرير خصائص question و punchLine إلى بعض هذه المكونات ، و punchLine فقط punchLine . يتم الآن تعيين قيم هذه الخصائص في رمز إنشاء مكون Joke بنص عادي. في الواقع ، يدخل الجزء الأكبر من البيانات التي يتم عرضها على صفحات تطبيقات React في التطبيق كنتيجة لطلبات HTTP لبعض واجهات برمجة التطبيقات. يتم دعم واجهات برمجة التطبيقات هذه عن طريق الخوادم التي تأخذ المعلومات من قواعد البيانات وتهيئتها في شكل كود JSON وترسل هذا الرمز إلى أجزاء العميل من التطبيقات. لم نصل بعد إلى هذا المستوى للوفاء بطلبات واجهة برمجة التطبيقات ، لذا ، الآن ، كمصدر للبيانات ، سنستخدم ملفًا به بيانات يمكن الحصول عليها عن طريق تحليل استجابة خادم JSON. وهي ستكون ملف jokesData.js بالمحتويات التالية:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   },   {       id: 3,       question: "Did you hear about the mathematician who's afraid of negative numbers?",       punchLine: "He'll stop at nothing to avoid them!"   },   {       id: 4,       question: "Hear about the new restaurant called Karma?",       punchLine: "There's no menu: You get what you deserve."   },   {       id: 5,       question: "Did you hear about the actor who fell through the floorboards?",       punchLine: "He was just going through a stage."   },   {       id: 6,       question: "Did you hear about the claustrophobic astronaut?",       punchLine: "He just needed a little space."   } ] export default jokesData 

سيكون هذا الملف موجودًا في دليل src .


ملف جديد في مجلد src

في الواقع ، يحتوي على مجموعة من الكائنات. يمكن الحصول على صفيف مماثل عن طريق تحليل بيانات JSON المستلمة من واجهة برمجة تطبيقات معينة. نحن تصدير من هذا الملف مجموعة من jokesData . إذا لزم الأمر ، يمكننا استيراد هذا الملف إلى المكون الذي نحتاج إليه ونتخيل أننا لا نعمل مع البيانات المأخوذة من الملف ، ولكن مع ما أعاد إلينا بعض API.

الآن بعد أن أصبح لدينا مجموعة من البيانات المصدر ، دعونا نفكر في كيفية تحويل هذه البيانات إلى مجموعة من مثيلات مكونات React.

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

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

لنفترض أن لدينا مجموعة رقمية:

 const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 

يمكننا معالجة هذه المصفوفة باستخدام طريقة المصفوفة map() القياسية ، لتمريرها وظيفة معينة تحدد ترتيب التحويل لعناصر هذه المصفوفة. في حالتنا ، سيتم تمرير هذه الوظيفة ، واحدة تلو الأخرى ، الأرقام من هذه المجموعة. يمكن أن تفعل أي وظيفة معهم ، وبعد ذلك ستذهب ما تقوم بإرجاعه إلى صفيف جديد ، إلى عنصر يتوافق فهرسه مع فهرس العنصر الذي تتم معالجته. إذا احتجنا إلى تكوين صفيف جديد ، تكون عناصره عناصر من الصفيف الأصلي ، مضروبة في 2 ، فسيبدو كما يلي:

 const doubled = nums.map(function(num) {   return num * 2 }) 

تحقق من تشغيل هذا الرمز:

 console.log(doubled) // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 

إذا لم تقابل طرق الصفيف من قبل - مثل map() ، filter() ، reduce() وغيرها - فمن المستحسن التعامل معها.

سنستخدم هنا map() لإنشاء قائمة بحالات المكونات تلقائيًا.

دعنا نعود إلى مثالنا. استيراد ملف App.js إلى ملف App.js يتم ذلك مثل هذا:

 import jokesData from "./jokesData" 

بعد ذلك ، في رمز البرنامج ، يمكننا العمل مع مجموعة jokesData . وهي سنستخدم طريقة map() . إليك ما ستبدو عليه "فارغة" من هذه الطريقة.

 jokesData.map(joke => { }) 

لاحظ أننا هنا نقوم بتمرير وظيفة السهم إلى طريقة map() . في حالتنا ، يتيح لنا ذلك جعل الشفرة أكثر إحكاما. نظرًا لأن الوظيفة تأخذ معلمة واحدة فقط ( joke ) ، يمكننا ، عند إعلانها ، الاستغناء عن الأقواس.

من الوظيفة التي تم تمريرها إلى طريقة map() ، نريد أن نرجع نسخة جديدة من مكون Joke ، حيث يتم punchLine خصائص question و punchLine صفيف punchLine إليها. إليك ما قد يبدو عليه:

 jokesData.map(joke => {   return (   <Joke question={joke.question} punchLine={joke.punchLine} />   ) }) 

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

 const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />) 

jokeComponents ثابت jokeComponents الآن على صفيف ، كل عنصر منها عبارة عن وصف لمثيل مكون Joke مع خصائص question و punchLine تم تمريرها إليه.

ماذا نفعل الآن مع هذه المجموعة من المكونات؟ React يجعلها مريحة للغاية للعمل مع هذه المصفوفات. وهي نتحدث عن حقيقة أن مثل هذه المجموعة يمكن استخدامها في كود JSX. إليك ما سيبدو عليه رمز ملف App الآن:

 import React from "react" import Joke from "./Joke" import jokesData from "./jokesData" function App() {   const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />)       return (       <div>           {jokeComponents}       </div>   ) } export default App 

بعد ذلك ، ستبدو صفحة التطبيق كما كانت من قبل ، ومع ذلك ، سترى التحذير التالي في وحدة تحكم المستعرض:

 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https://fb.me/react-warning-keys for more information.   in Joke (at App.js:7)   in App (at src/index.js:6) 

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

لذلك ، فإن خاصية key تحتاج إلى تعيين قيمة فريدة من نوعها. كقاعدة عامة ، في كائنات البيانات المستلمة من واجهة برمجة التطبيقات ، هناك بعض المعرفات (الخصائص مثل id ). الشيء الرئيسي بالنسبة لنا هو تفردهم. على سبيل المثال ، يمكننا تعيين خاصية key إلى joke.question - جميع النصوص في هذه الخصائص فريدة في تطبيقنا. لكننا سنفعل خلاف ذلك. تذكر كيف jokesData.js الكائنات التي تحتوي على بيانات من الصفيف الذي jokesData.js ملف jokesData.js . هنا جزء منه:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   }, ... ] 

كل كائن له خاصية id ، تفرد نحافظ عليه بشكل مستقل. هي قيم هذه الخصائص التي يمكن استخدامها كقيم لخاصية key .

الآن ستتخذ التعليمات البرمجية لإنشاء مجموعة من مثيلات المكونات في App.js النموذج التالي:

 const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />) 

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

بعد كل التحولات التي أخضعناها للمشروع ، لم يتغير مظهر صفحة التطبيق. ومع ذلك ، أصبح رمز مكون App أقصر وأكثر وضوحًا ، وأصبحت البيانات الخاصة بتكوين قائمة المكونات مأخوذة من شيء يشبه بشدة مصدر بيانات خارجي. وبهذه الطريقة تعمل التطبيقات الحقيقية.

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

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

إذا كنت تريد ، يمكنك تجربة هذه الأساليب. دعنا نقول حاول استخدام طريقة filter() وإزالة مثيلات Joke من مثيلات App التي لا تتجاوز خاصية question الخاصة بها الطول المطلوب. أو تأكد من أن المكونات التي تم تعيين خاصية question وخاصية punchLine عليها فقط punchLine .

ملخص

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

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