- \n {movies.map((movie, index) => (\n
- \n {movie.title} ({movie.year})\n \n \n ))}\n
Watchlist قائمة. وكذلك صفحة المنشورات، وجدول الطلبات، ونتائج البحث، والقائمة الرئيسية. أغلب الواجهات قوائم من أشياء مبنية من مصفوفات بيانات، ونهج React هو ما قد تخمّنه من JavaScript نفسها: حوّل مصفوفة البيانات إلى مصفوفة عناصر.
\nmapexport default function MovieList({ movies }) {\n return (\n <ul>\n {movies.map((movie) => (\n <li key={movie.id}>\n {movie.title} ({movie.year})\n </li>\n ))}\n </ul>\n );\n}تُرجع map مصفوفة من عناصر <li>، وتعرض React المصفوفات بعرض كل عنصر فيها بالترتيب. لا توجد صياغة حلقات خاصة لتتعلّمها؛ إنها دالة المصفوفات التي تعرفها أصلًا.
والتصفية والترتيب الفكرة نفسها: جهّز المصفوفة، ثم طبّق عليها map. افعل ذلك أثناء الـ render، من البيانات التي لديك. القائمة الظاهرة مشتقّة، فلا تحتاج إلى أن تكون state.
\nconst movies = [\n { id: 'a1', title: 'Arrival', year: 2016, watched: true },\n { id: 'p2', title: 'Past Lives', year: 2023, watched: false },\n { id: 'd3', title: 'Dune: Part Two', year: 2024, watched: false },\n];\n\nconst toWatch = movies\n .filter((m) => !m.watched)\n .toSorted((a, b) => b.year - a.year);\n\nconsole.log(toWatch.map((m) => m.title)); // [\"Dune: Part Two\", \"Past Lives\"]\nconsole.log(movies[0].title); // Arrival (the original order is untouched)تُرجع toSorted نسخة مرتّبة، وهي مدعومة في كل المتصفّحات الحالية. أمّا sort الأقدم فتعيد ترتيب المصفوفة في مكانها. وإذا استُدعيت على state أو props، فهي تعدّل بصمت بيانات لا تملكها. وإن احتجت إلى دعم متصفّحات أقدم، فانسخ أولًا: [...movies].sort(…).
كل عنصر في قائمة يحتاج إلى prop اسمه key، وتحذّرك React في الـ console حين يغيب. ويتّضح السبب حين تتغيّر القائمة.
حين تعيد React رسم قائمة، تكون لديها مصفوفة العناصر القديمة والجديدة. وعليها أن تطابق بينهما: أي عنصر جديد هو نفسه أي عنصر قديم؟ هذا مهمّ لأن كل عنصر قد يملك state، مثل ملاحظة نصف مكتوبة في حقل، أو زر عليه التركيز، أو قائمة مفتوحة، ويجب أن يبقى هذا الـ state مع العنصر الصحيح.
\nالـ key هو بطاقة اسم العنصر. تطابق React العناصر القديمة والجديدة حسب الـ key. الـ key نفسه: إنه العنصر نفسه، فتحتفظ React بالـ DOM والـ state الخاصين به وتحدّث ما تغيّر. key جديد: عنصر جديد، فتُنشئه React. key غائب: أُزيل العنصر، فتهدمه React.
\nالـ key الجيد فريد بين الإخوة وثابت: للعنصر نفسه الـ key نفسه في كل render.
\n{ id: crypto.randomUUID(), title, year }. يُخزَّن على الكائن ولا يتغيّر أبدًا.key={Math.random()} أو key={crypto.randomUUID()} داخل map ينتج keys جديدة في كل render. فتعامل React كل صف على أنه جديد تمامًا، وتهدم الـ DOM، وتُضيّع تركيز الحقل والـ state مع كل حرف تكتبه.لا يلزم أن تكون الـ keys فريدة إلا بين الإخوة في القائمة نفسها. ويمكن لقائمتين مختلفتين استخدام المعرّفات نفسها.
\n\nيوضع الـ key على العنصر الخارجي الذي تُرجعه دالة الـ callback في map. وحين يكون ذلك component، ضعه على الـ component:
{movies.map((movie) => (\n <MovieItem key={movie.id} movie={movie} />\n))}لا يستطيع MovieItem قراءة key؛ فـ React تستخدمه ولا تمرّره إلى الأسفل. وإذا احتاج الـ component إلى المعرّف، فمرّره بشكل منفصل كـ prop.
وحين يرسم كل عنصر عدّة إخوة من دون غلاف، استخدم الصيغة الطويلة للـ fragment، فهي تقبل key:
\nimport { Fragment } from 'react';\n\n{movies.map((movie) => (\n <Fragment key={movie.id}>\n <dt>{movie.title}</dt>\n <dd>{movie.year}</dd>\n </Fragment>\n))}الصيغة القصيرة <>…</> لا تقبل key.
صار بإمكانك عرض أي قائمة بشكل صحيح. وبهذا يكتمل Watchlist الثابت. في القسم التالي يبدأ بالحركة: الـ state يتيح للقائمة أن تتغيّر حين ينقر المستخدم ويكتب ويرسل.
\n","toc":[{"id":"sec-1","text":"من البيانات إلى العناصر باستخدام map","level":2},{"id":"sec-2","text":"ما وظيفة الـ keys","level":2},{"id":"sec-3","text":"اختيار الـ key","level":2},{"id":"sec-4","text":"الـ keys على الـ components والـ fragments","level":2}],"takeaways":["حوّل مصفوفة البيانات إلى مصفوفة عناصر باستخدامmap، وضع الـ key على العنصر الخارجي الذي تُرجعه دالة الـ callback.","يُخبر الـ key React بهوية كل عنصر بين مرّات الـ render، لذا يجب أن يكون فريدًا بين الإخوة وثابتًا مع الوقت.","استخدم معرّفًا (id) من بياناتك كـ key؛ وأنشئ المعرّفات لحظة إنشاء العناصر، لا أثناء الـ render أبدًا.","الـ keys المبنية على الـ index تنكسر حين يمكن إعادة ترتيب القائمة أو تصفيتها أو الإدراج فيها، لأن الـ state يلتصق بالموضع بدل العنصر.","صفِّ نُسخًا من بياناتك ورتّبها أثناء الـ render؛ فالدالة sort تغيّر المصفوفة في مكانها، لذا استخدم toSorted أو رتّب نسخة."],"further":[{"title":"Rendering Lists","url":"https://react.dev/learn/rendering-lists"},{"title":"Preserving and Resetting State","url":"https://react.dev/learn/preserving-and-resetting-state"},{"title":"Array.prototype.toSorted() on MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted"}],"quiz":[{"q":"أين يوضع الـ key؟
\nfunction MovieList({ movies }) {\n return (\n <ul>\n {movies.map((movie) => (\n <MovieItem movie={movie} />\n ))}\n </ul>\n );\n}<li> داخل MovieItem، بالشكل <li key={movie.id}>.","why":"تحتاج React إلى الـ keys على العناصر في المصفوفة التي تُرجعها من map. داخل MovieItem لا يوجد إلا <li> واحد، فالـ key هناك لا يفعل شيئًا."},{"text":"على الـ <ul>، بالشكل <ul key="movies">.","why":"الـ <ul> ليس واحدًا من إخوة كثيرين. العناصر بداخله هي ما يجب على React التمييز بينها."},{"text":"على MovieItem نفسه، بالشكل <MovieItem key={movie.id} movie={movie} />.","why":"صحيح. يوضع الـ key على العنصر الخارجي الذي تُرجعه دالة الـ callback في map، وهو هنا الـ component."},{"text":"لا مكان له، لأن الـ components تحصل على keys تلقائية.","why":"ترجع React إلى الـ index وتحذّر أثناء التطوير. وهذا البديل بالضبط هو ما يسبّب الأخطاء حين تتغيّر القائمة."}],"answer":2},{"q":"لكل صف فيلم حقل نصي لملاحظة. كتبت «Loved it» بجانب Arrival، ثم أضفت فيلمًا جديدًا في أعلى القائمة. مع key={index}، أين تنتهي «Loved it»؟
key={movie.id}. أمّا مع keys الـ index فتطابق React الصفوف حسب الموضع، لا حسب الفيلم."},{"text":"بجانب الفيلم الجديد في الأعلى، لأن له الآن الـ index صفر، وهو الـ key الذي كان لصف Arrival.","why":"صحيح. تعيد React استخدام الصف ذي الـ key صفر، بما فيه حالة الـ DOM في حقله، لأي عنصر صار الآن في الموضع صفر."},{"text":"تختفي، لأن كل الصفوف يُعاد إنشاؤها.","why":"لا تعيد React إنشاء الصفوف التي ما زالت keys الخاصة بها موجودة، بل تعيد استخدامها، ولهذا بالضبط تنتقل الملاحظة."},{"text":"ترمي React خطأ بسبب تكرار الـ key.","why":"الـ indexes فريدة، فلا يوجد تكرار. الخطأ صامت، وهذا ما يجعله خطيرًا."}],"answer":1},{"q":"أيّ key اختيار جيد للأفلام التي يضيفها المستخدم من خلال نموذج؟
","options":[{"text":"key={Math.random()} داخل دالة الـ callback في map.","why":"الـ key الجديد في كل render يجعل React تهدم كل صف وتعيد إنشاءه في كل مرة، فيضيع التركيز والـ state."},{"text":"key={movie.title}","why":"العناوين ليست فريدة؛ هناك عدّة أفلام اسمها “Dune”. والأخوان اللذان لهما الـ key نفسه يربكان React."},{"text":"key={index}، لأن المستخدم يضيف أفلامًا فقط.","why":"سيحذف المستخدمون ويصفّون ويرتّبون أيضًا. وتنكسر keys الـ index بمجرّد أن تتحرّك العناصر نسبةً إلى بعضها."},{"text":"معرّف يُنشأ مرة واحدة بـ crypto.randomUUID() عند إضافة الفيلم، ويُخزَّن على كائن الفيلم.","why":"صحيح. يُنشأ المعرّف مع البيانات، ويبقى كما هو طوال عمر الفيلم، وهو فريد."}],"answer":3},{"q":"تأتي movies من الـ state. ما المشكلة في const sorted = movies.sort((a, b) => b.year - a.year); داخل كود الـ render؟
sort تعيد ترتيب movies في مكانها، فأنت تعدّل الـ state أثناء الـ render.","why":"صحيح. استخدم movies.toSorted(…) أو [...movies].sort(…) لترتيب نسخة وترك الـ state كما هو."},{"text":"الدالة sort لا تستطيع مقارنة الأرقام.","why":"مع دالة مقارنة مثل (a, b) => b.year - a.year، ترتّب sort الأرقام بشكل صحيح."},{"text":"يجب أن يحدث الترتيب داخل effect، لا أثناء الـ render.","why":"حساب قيمة مشتقّة أثناء الـ render هو الصواب تمامًا. المشكلة في تغيير المصفوفة الأصلية."}],"answer":0}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 'a1', title: 'Arrival', year: 2016 },\n { id: 'p2', title: 'Past Lives', year: 2023 },\n];\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n\n function addDune() {\n setMovies([{ id: 'd3', title: 'Dune: Part Two', year: 2024 }, ...movies]);\n }\n\n // 1. Show the movies newest first, without changing `movies` itself.\n // 2. Fix the key so each note stays with its movie.\n return (\n لكل صف فيلم حقل لملاحظة. هناك مشكلتان:
\nyear). رتّب نسخة أثناء الـ render، ولا تغيّر الـ state المسمّى movies.أبقِ الـ markup كما هو: <li> واحد لكل فيلم، فيه <span> (العنوان والسنة) و<input>.
movies.toSorted((a, b) => b.year - a.year) تُرجع مصفوفة جديدة مرتّبة وتترك movies كما هي.","طبّق map على النسخة المرتّبة، لا على movies.","لكل فيلم id ثابت أصلًا. استخدم key={movie.id} بدلًا من الـ index."],"explanation":"مع key={index} تطابق React الصفوف حسب الموضع. إضافة فيلم تُزيح كل شيء إلى الأسفل، فيُعاد استخدام الصف الذي كان لـ Arrival (الـ key صفر في كود البداية) لأي فيلم صار في ذلك الموضع الآن، والملاحظة ما زالت في حقله. أمّا مع key={movie.id} فتعرف React أن صف Arrival هو العنصر نفسه كما كان، فتنقله بقيمة حقله وكل شيء. وترتيب نسخة أثناء الـ render يُبقي movies المصدر الوحيد للحقيقة؛ والترتيب من الأحدث إلى الأقدم يُشتقّ منها في كل مرة.