لماذا نستخدم في رياكت map بدلاً من loop

في React نستخدم map بدلا من الحلقات التقليدية مثل for وwhile لأن map ستعيد لنا مصفوفة جديدة تحتوي على عناصر JSX جاهزة للعرض مباشرة داخل دالة render أو داخل return للدوال المركبة وهو ما يتماشى مع التصميم الدالي (Functional) لرياكت.

بعكس for وwhile التي تستخدم لأغراض تكرار عام وتحتاج إلى إنشاء مصفوفة خارجية ثم دفع العناصر إليها يدويا فإن map تبقي الكود أكثر نظافة وتسمح بتعيين key لكل عنصر بسهولة وتجنب التعديلات الجانبية.

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

في dom الا يمكننا استخدام map

بتاريخ 7 ساعة قال Zen Allaham:

في dom الا يمكننا استخدام map

تقصد في جافاسكريبت بدون React؟

تستطيع ذلك لا مشكلة، نعم، ولكن ليس مباشرة على عناصر DOM لأنها ليست arrays بشكل افتراضي بل كائنات تشبه المصفوفات، حيث يجب أولاً تحويل مجموعة عناصر DOM وهم NodeList أو HTMLCollection إلى مصفوفة.

بمعنى بعد قيامك بإختيار مجموعة من العناصر المحددة باستخدام querySelectorAll الذي يعيد NodeList، فتستطيع  تحويلها إلى مصفوفة من خلال Array.from

const items = document.querySelectorAll('.item');

const texts = Array.from(items).map(item => item.textContent);

console.log(texts); 

أو معامل النشر spread (...)

const items = document.querySelectorAll('.item');

const texts = [...items].map(item => item.textContent);

console.log(texts)

وللعلم في المتصفحات الحديثة، NodeList تدعم بعض دوال المصفوفات مثل forEach، ولكن ليس map.