Arrival
\n \nRating: {rating}/5
\n \n \nانقر زر «Mark as watched» في function component عادي، ولن يحدث شيء. هذا هو الكود الذي يكتبه معظم الناس أول مرة:
\nexport default function MovieItem() {\n let watched = false;\n\n function handleClick() {\n watched = !watched;\n }\n\n return (\n <button onClick={handleClick}>\n {watched ? 'Watched' : 'Mark as watched'}\n </button>\n );\n}هناك خطآن. تغيير متغيّر محلي لا يُخبر React بأن شيئًا حدث، فلا تعيد الـ render أبدًا. وحتى لو تسبّب شيء آخر في render، فسيُنفَّذ let watched = false مرة أخرى ويعيد القيمة إلى البداية، لأن الـ component دالة، ومتغيّراتها المحلية تبدأ من جديد مع كل استدعاء. يحتاج الـ component إلى شيئين: ذاكرة تبقى بين مرّات الـ render، وطريقة ليطلب من React أن تعيد الـ render. هذا هو الـ state.
useStateimport { useState } from 'react';\n\nexport default function MovieItem({ title }) {\n const [watched, setWatched] = useState(false);\n\n return (\n <li>\n {title}\n <button aria-pressed={watched} onClick={() => setWatched(!watched)}>\n {watched ? 'Watched' : 'Mark as watched'}\n </button>\n </li>\n );\n}تُعلن useState(false) عن قطعة state واحدة بقيمة ابتدائية false. وتُرجع زوجًا تفكّكه وتسمّيه: القيمة الحالية، ودالة setter (دالة الضبط). التسمية [thing, setThing] عُرف يتّبعه الجميع؛ التزم به.
حين تستدعي setWatched(true)، تخزّن React القيمة الجديدة وتجدول re-render. فتستدعي MovieItem مرة أخرى، وهذه المرة تُرجع useState القيمة true. يُحسب الـ JSX الخاص بك منها، وتحدّث React الـ DOM ليطابقه.
الـ state ملك لـ نسخة (instance) من الـ component، لا للدالة. ارسم <MovieItem /> ثلاث مرات وستحصل على ثلاث قيم watched مستقلة. النقر على واحدة لا يؤثّر في الأخريين.
هذه هي الفكرة التي تجعل الـ state مفهومًا فجأة. حين تستدعي React الـ component، تسلّمك الـ state الخاص بذلك الـ render. وكل ما في ذلك الـ render، الـ JSX ومعالجات الأحداث وكل شيء، يرى تلك القيم. ضبط الـ state لا يغيّر المتغيّر الذي لديك أصلًا؛ بل يطلب render جديدًا بقيمة جديدة.
\nولهذا يُفاجأ الناس بهذا:
\nconst [count, setCount] = useState(0);\n\nfunction addThree() {\n setCount(count + 1); // count is 0 → asks for 1\n setCount(count + 1); // count is still 0 → asks for 1\n setCount(count + 1); // still 0 → 1\n}الاستدعاءات الثلاثة تقرأ اللقطة نفسها، فتكون النتيجة 1 لا 3. وحين تعتمد القيمة التالية على السابقة، مرّر دالة تحديث (updater function) بدلًا من قيمة:
\nfunction addThree() {\n setCount((c) => c + 1); // 0 → 1\n setCount((c) => c + 1); // 1 → 2\n setCount((c) => c + 1); // 2 → 3\n}تضع React دوال التحديث في طابور وتنفّذها بالترتيب، وكل واحدة تستقبل نتيجة سابقتها. لست بحاجة إلى دوال التحديث في كل مكان؛ فـ setWatched(!watched) في معالج نقرة لا بأس به. استخدمها حين تضبط الـ state نفسه أكثر من مرة في معالج واحد، أو في كود يُنفَّذ لاحقًا، مثل مؤقّت.
يحتفظ Watchlist بمصفوفة من كائنات الأفلام في الـ state. وتقرّر React ما إذا كان الـ state قد تغيّر بمقارنة القيمة القديمة بالجديدة باستخدام Object.is. فإذا غيّرت مصفوفة في مكانها وأعدت المصفوفة نفسها، ترى React المرجع نفسه وقد تتخطّى الـ render كليًا.
لذا تعامل مع الـ state كقيمة للقراءة فقط، وابنِ قيمًا جديدة:
\nconst [movies, setMovies] = useState(INITIAL_MOVIES);\n\n// Add: a new array with everything plus one more\nsetMovies([...movies, { id: crypto.randomUUID(), title: 'Dune', watched: false }]);\n\n// Remove: a new array without one item\nsetMovies(movies.filter((m) => m.id !== id));\n\n// Update one: a new array, with a new object for the changed item\nsetMovies(movies.map((m) => (m.id === id ? { ...m, watched: !m.watched } : m)));هذه الأسطر الثلاثة (الـ spread للإضافة، وfilter للحذف، وmap مع spread للتحديث) تغطّي معظم تحديثات الـ state التي ستكتبها للقوائم. والكائنات تعمل بالطريقة نفسها: setFilters({ ...filters, year: 2024 }).
الوسيط الممرَّر إلى useState لا يُستخدم إلا في الـ render الأول، وتتجاهله مرّات الـ render اللاحقة. وإذا كان حساب القيمة الابتدائية مكلفًا، كقراءة بيانات محفوظة وتحليلها، فمرّر دالة بدلًا منها، useState(() => loadMovies())، فتستدعيها React في الـ render الأول فقط بدل أن تستدعيها في كل render. وستستخدم هذا بالضبط لتحميل Watchlist من localStorage في القسم 4.
صار بإمكان الـ components أن تتذكّر. في الدرس التالي تنظر عن قرب إلى الأحداث التي تغيّر الـ state: النقر، ولوحة المفاتيح، وكائن الحدث نفسه.
\n","toc":[{"id":"sec-1","text":"الـ useState","level":2},{"id":"sec-2","text":"كل render لقطة","level":2},{"id":"sec-3","text":"المصفوفات والكائنات: استبدل، لا تعدّل","level":2},{"id":"sec-4","text":"اختيار القيمة الابتدائية","level":2}],"takeaways":["تُرجعuseState القيمة الحالية ودالة setter؛ واستدعاء الـ setter يجدول re-render بالقيمة الجديدة.","كل render يرى لقطة ثابتة من الـ state، لذا فقراءة الـ state مباشرة بعد ضبطه تعطي القيمة القديمة.","استخدم دالة تحديث، setCount((c) => c + 1)، حين تعتمد القيمة التالية على السابقة.","لا تعدّل الـ state أبدًا؛ أنشئ مصفوفات وكائنات جديدة باستخدام الـ spread وmap وfilter حتى تلاحظ React التغيير.","استدعِ الـ hooks في المستوى الأعلى من الـ component، ولا تستدعها أبدًا داخل شروط أو حلقات أو دوال متداخلة."],"further":[{"title":"State: A Component's Memory","url":"https://react.dev/learn/state-a-components-memory"},{"title":"State as a Snapshot","url":"https://react.dev/learn/state-as-a-snapshot"},{"title":"Updating Arrays in State","url":"https://react.dev/learn/updating-arrays-in-state"},{"title":"useState reference","url":"https://react.dev/reference/react/useState"}],"quiz":[{"q":"تبدأ count من 0. ماذا يعرض الزر بعد نقرة واحدة؟
function handleClick() {\n setCount(count + 1);\n setCount(count + 1);\n setCount(count + 1);\n}count من الـ render نفسه، حيث قيمتها 0. الاستدعاءات الثلاثة كلها تطلب 0 + 1."},{"text":"0","why":"الـ state يتغيّر فعلًا، لكنه يتغيّر إلى 1، لا إلى 3."},{"text":"خطأ، لأنك لا تستطيع استدعاء الـ setter إلا مرة واحدة في كل معالج.","why":"يمكنك استدعاء الـ setters كما تشاء. تجمعها React وتعيد الـ render مرة واحدة."},{"text":"1","why":"صحيح. count لقطة قيمتها 0 طوال المعالج، فالاستدعاءات الثلاثة كلها تضبط 1. استخدم setCount((c) => c + 1) لتتراكم التحديثات."}],"answer":3},{"q":"لماذا لا يعمل زر التبديل هذا؟ داخل الـ component يوجد let watched = false;، ومعالج الزر ينفّذ watched = !watched;.
! في React.","why":"المعامل ! يعمل بلا مشكلة. المشكلة في مكان القيمة وفيما يُطلق الـ render."},{"text":"يجب أن يُرجع المعالج القيمة الجديدة.","why":"القيم التي تُرجعها معالجات الأحداث تُتجاهل. لا بدّ من شيء يُخبر React بأن تعيد الـ render."},{"text":"تغيير متغيّر محلي لا يُطلق re-render، والـ render التالي سيعيده إلى false على أي حال.","why":"صحيح. المتغيّرات المحلية لا تبقى بين مرّات الـ render، وReact لا تراقبها. والـ useState يحلّ المشكلتين."},{"text":"يجب أن تكون let هي var.","why":"الكلمة المفتاحية لا تهمّ. أي متغيّر محلي يُعاد إنشاؤه في كل render."}],"answer":2},{"q":"أيّ سطر يعلّم فيلمًا واحدًا كمُشاهَد في الـ state المسمّى movies بشكل صحيح؟
setMovies(movies.map((m) => (m.id === id ? { ...m, watched: true } : m)));","why":"صحيح. تبني map مصفوفة جديدة، والفيلم المتغيّر كائن جديد، والأفلام التي لم تتغيّر يُعاد استخدامها."},{"text":"movies.find((m) => m.id === id).watched = true; setMovies(movies);","why":"هذا يعدّل الكائن الموجود ويُعيد المصفوفة نفسها. تقارن React باستخدام Object.is، فلا ترى تغييرًا وقد تتخطّى الـ render."},{"text":"setMovies(movies.push({ id, watched: true }));","why":"الدالة push تعدّل المصفوفة وتُرجع الطول الجديد، فيصبح الـ state رقمًا."},{"text":"movies[0].watched = true;","why":"تعديل الـ state لا يُخبر React أبدًا بأن شيئًا تغيّر، وهو يعدّل الفيلم الخطأ إلا إذا صادف أن كان الأول."}],"answer":0},{"q":"داخل معالج نقرة تستدعي setTitle('Dune') ثم console.log(title) في السطر التالي. كان العنوان القديم ‘Arrival’. ماذا يُطبع؟
title هي ‘Dune’."},{"text":"‘Arrival’","why":"صحيح. title ثابت في لقطة هذا الـ render، والقيمة الجديدة تظهر في الـ render التالي."},{"text":"undefined","why":"ما زال المتغيّر يحمل قيمة هذا الـ render، وهي ‘Arrival’."}],"answer":1}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nexport default function App() {\n let watched = false;\n const [rating, setRating] = useState(0);\n\n function toggleWatched() {\n watched = !watched;\n }\n\n function addOne() {\n setRating(rating + 1);\n }\n\n function addTwo() {\n setRating(rating + 1);\n setRating(rating + 1);\n }\n\n return (\n Rating: {rating}/5
\n \n \nRating: {rating}/5
\n \n \nفي بطاقة الفيلم هذه ميزتان معطّلتان.
\n#toggle) لا يفعل شيئًا. اجعله يبدّل بين Mark as watched وWatched، مع أن تتبعه قيمة aria-pressed.#plus-two) لا يضيف إلا 1، ويمكن للتقييم أن يتجاوز 5. اجعل +2 يضيف اثنين، ولا تدع التقييم يتجاوز 5 أبدًا، أيًّا كان الزر الذي يُنقر.let يعود إلى قيمته الأولى في كل render ولا يُطلق أي render. خزّن watched باستخدام useState(false).","الاستدعاءان في addTwo يقرآن لقطة rating نفسها. استخدم دالة تحديث: setRating((r) => …).","قيّد القيمة داخل دالة التحديث: setRating((r) => Math.min(r + 1, 5)). بعدها يمكن لـ addTwo أن تستدعي addOne() مرتين."],"explanation":"يجب أن تكون watched قيمة state: فالمتغيّر المحلي لا يبقى إلى الـ render التالي ولا يتسبّب في حدوثه. أمّا التقييم، فكل معالج يرى لقطة، لذا فإن setRating(rating + 1) مرتين تطلب القيمة نفسها مرتين. أمّا دالة التحديث فتستقبل أحدث قيمة في الطابور، ووضع Math.min(…, 5) بداخلها يطبّق الحدّ على كل تحديث، بما في ذلك نصفا الزر +2.