هذا هو Watchlist الذي تبنيه، موصوفًا كما يسلّمه المصمّم: ترويسة فيها العنوان وعبارة «3 to watch»؛ ونموذج فيه حقل لعنوان الفيلم وزر Add؛ وصف من أزرار الفلترة (All وTo watch وWatched)؛ وقائمة أفلام، لكل فيلم عنوانه وسنته ومربّع اختيار لتعليمه كمُشاهَد. وحين تكون القائمة فارغة، تحلّ محلّها رسالة ودودة.
\nقبل أن تكتب سطرًا واحدًا من الكود، قرّر ما هي الـ components. هذه أهم خطوة تصميمية في تطبيق React، وتُنجَز بالقلم.
\nخذ التصميم وارسم صندوقًا حول كل قطعة تؤدّي عملًا واحدًا. ثم سمِّ كل صندوق باسم، كما تسمّي دالة.
\nالصناديق المتداخلة تصبح شجرة. يملك App الشاشة كلها. ويرسم MovieList إمّا عدّة MovieItem وإمّا EmptyState واحدًا. هذه الشجرة هي خطة بقية الدورة؛ ستبني كل صندوق فيها كـ component.
اجعل القطعة component مستقلًا إذا تحقّق واحد على الأقل مما يلي:
\nMovieItem مرة لكل فيلم، والغاية أن تكتبه مرة واحدة.AddMovieForm الكتابة والإرسال، ولا يحتاج أي جزء آخر إلى معرفة كيف يفعل ذلك.لا تقسّم لمجرد أنك تستطيع. الـ component الذي لا يفعل سوى تغليف <span> واحد يضيف ملفًا وسطر import واسمًا عليك تذكّره، ولا يعطيك شيئًا في المقابل. الفرق المتمرّسة كثيرًا ما تُبقي component من 100 سطر بدل أن تقسّمه إلى خمسة من 20 سطرًا لا تُستخدم إلا معًا. ابدأ بحجم أكبر قليلًا، واستخرج القطع حين يظهر أحد الأسباب الثلاثة.
بعد رسم الشجرة، ابنِها ببيانات مكتوبة يدويًا ومن دون أي تفاعل. مرّر البيانات من الأعلى إلى الأسفل حتى يكون الشكل صحيحًا من البداية:
\nconst MOVIES = [\n { id: 1, title: 'Arrival', year: 2016, watched: true },\n { id: 2, title: 'Past Lives', year: 2023, watched: false },\n { id: 3, title: 'Paddington 2', year: 2017, watched: false },\n];\n\nexport default function App() {\n return (\n <main>\n <Header movies={MOVIES} />\n <AddMovieForm />\n <FilterBar />\n <MovieList movies={MOVIES} />\n </main>\n );\n}\n// …Header, AddMovieForm, FilterBar and MovieList defined belowبناء النسخة الثابتة كتابة في معظمه، وهو يضبط البنية والـ markup بينما لا شيء يتحرّك. أمّا إضافة التفاعل فتفكير في معظمها. والقيام بالأمرين معًا هو الطريق الذي تنتهي به الـ components متشابكة.
\nبعد ذلك، اكتب قائمة بكل قطعة بيانات في التطبيق، واطرح على كل واحدة ثلاثة أسئلة: هل تبقى ثابتة مع الوقت؟ هل تأتي من الأب؟ هل يمكنك حسابها من بيانات أخرى؟ إذا كان الجواب نعم على أيٍّ منها، فهي ليست state.
\nبالنسبة إلى Watchlist:
\n| البيانات | \nstate؟ | \nالسبب | \n
|---|---|---|
| قائمة الأفلام | \nنعم | \nتتغيّر حين تضيف فيلمًا أو تحذفه أو تعلّمه | \n
| الفلتر الحالي | \nنعم | \nيتغيّر حين تنقر زر فلترة | \n
| النص المكتوب في النموذج | \nنعم | \nيتغيّر أثناء الكتابة | \n
| عدد الأفلام المتبقية | \nلا | \nيُحسب من الأفلام | \n
| الأفلام الظاهرة حاليًا | \nلا | \nتُحسب من الأفلام + الفلتر | \n
ثلاث قطع من الـ state، وقيمتان مشتقّتان. إبقاء الـ state في حدّه الأدنى هو العادة الوحيدة التي تمنع أكبر عدد من الأخطاء في تطبيقات React. فكل قطعة state إضافية نسخة ثانية من الحقيقة قد تختلف عن الأولى.
\n\nيحتاج Header إلى الأفلام (من أجل العدد)، ويحتاجها MovieList (لعرضها). والقاعدة: تعيش البيانات في أقرب أب مشترك لكل الـ components التي تحتاجها، وهو هنا App. وتنزل منه كـ props. وحين يحتاج ابنٌ إلى تغييرها، يمرّر له الأب دالة يستدعيها. ستفعل هذا تحديدًا في القسم 3.
في الدرس التالي تتعلّم الـ props كما يجب: كيف تمرّر البيانات إلى الـ components، وتضبط القيم الافتراضية، وتُبقي الـ components قابلة لإعادة الاستخدام.
\n","toc":[{"id":"sec-1","text":"ارسم صناديق وسمِّها","level":2},{"id":"sec-2","text":"متى تقسّم، ومتى لا تفعل","level":2},{"id":"sec-3","text":"ابنِ النسخة الثابتة أولًا","level":2},{"id":"sec-4","text":"اعثر على أقل قدر من الـ state","level":2},{"id":"sec-5","text":"أين تعيش البيانات","level":2}],"takeaways":["ارسم صناديق حول التصميم وسمِّ كل صندوق؛ الصناديق المتداخلة تصبح شجرة components.","قسّم الـ component حين تتكرّر قطعة منه، أو يكون لها عمل مستقل، أو حين يصعب قراءة الأب، لا لمجرد العادة.","ابنِ نسخة ثابتة من بيانات مكتوبة يدويًا أولًا، ثم أضف التفاعل.","احتفظ بأقل قدر من الـ state؛ فكل ما يمكن حسابه من بيانات أخرى، كالعدد أو القائمة المصفّاة، قيمة مشتقّة وليس state."],"further":[{"title":"Thinking in React","url":"https://react.dev/learn/thinking-in-react"},{"title":"Your UI as a Tree","url":"https://react.dev/learn/understanding-your-ui-as-a-tree"}],"quiz":[{"q":"يحتاج Watchlist إلى عرض عدد الأفلام غير المُشاهَدة. من أين يجب أن يأتي هذا الرقم؟
","options":[{"text":"من state منفصل اسمهunwatchedCount يحدّثه كل معالج أحداث.","why":"النسخة الثانية من معلومة موجودة أصلًا في القائمة ستختلف عنها في يوم ما. وهذا بالضبط الخطأ الذي يُفترض أن تزيله React."},{"text":"يُحسب من مصفوفة الأفلام أثناء الـ render، باستخدام movies.filter((m) => !m.watched).length.","why":"صحيح. إنها بيانات مشتقّة. حسابها في كل render يُبقيها صحيحة تلقائيًا، وتكلفتها معدومة مع قائمة بهذا الحجم."},{"text":"يُخزَّن في localStorage ويُقرأ من جديد في كل render.","why":"الـ localStorage لحفظ البيانات بين مرات إعادة التحميل، لا لقيم يمكنك حسابها من بيانات موجودة لديك."}],"answer":1},{"q":"قسّم زميلك بطاقة الفيلم إلى MovieTitle وMovieYear وMovieTitleWrapper وMovieYearText، وكلٌّ منها يغلّف وسمًا واحدًا. ما أفضل تعليق في مراجعة الكود؟
في شجرة Watchlist، يحتوي App على Header وAddMovieForm وFilterBar وMovieList، ويحتوي MovieList على كثير من MovieItem. أيّ الـ components تحتاج إلى مصفوفة الأفلام؟
لماذا تبني نسخة ثابتة من Watchlist ببيانات مكتوبة يدويًا قبل إضافة الـ state؟
","options":[{"text":"لا تستطيع React رسم components فيها state قبل وجود نسخة ثابتة.","why":"لا توجد قاعدة كهذه. إنها طريقة عمل، لا شرط تقني."},{"text":"الـ components الثابتة تُرسم أسرع في الإنتاج.","why":"السرعة ليست السبب. ترتيب العمل يتعلّق بالفصل بين نوعين مختلفين من التفكير."},{"text":"لأنها تفصل التخطيط والبنية عن التفاعل، فتضبط الشجرة قبل أن تفكّر فيما يتغيّر.","why":"صحيح. بناء النسخة الثابتة كتابة في معظمه، أمّا تحديد الـ state فيحتاج تفكيرًا متأنّيًا. التعامل مع كلٍّ منهما على حدة يمنع تشابكهما."}],"answer":2}],"exercise":{"kind":"choice","multiple":true,"options":["ratings","average-rating","sort-order","sorted-movies","is-sorted-by-year"],"correct":["ratings","sort-order"],"title":"اعثر على أقل قدر من الـ state","prompt":"يحصل Watchlist على ميزتين جديدتين. صار بإمكان كل فيلم أن يحمل تقييمًا من 1 إلى 5 نجوم تضبطه بالنقر على النجوم، وصارت هناك قائمة منسدلة تتيح ترتيب القائمة حسب العنوان أو حسب السنة. وتعرض الترويسة أيضًا متوسّط تقييم الأفلام التي شاهدتها.
\nأيٌّ من هذه يجب تخزينه في الـ state؟ اختر كل ما هو state فعلًا، واترك كل ما هو مشتقّ.
\n","hints":["اسأل عن كل عنصر: هل يمكنني حساب هذا من بيانات أخرى موجودة لديّ؟","المتوسّط والنسخة المرتّبة والقيمة المنطقية عن نوع الترتيب كلها يمكن حسابها من التقييمات ومن الترتيب المختار."],"explanation":"شيئان فقط يتغيّران من تلقاء نفسيهما بسبب ما يفعله المستخدم: تقييم كل فيلم (المخزَّن على الفيلم داخل state الأفلام) والترتيب المختار. كل ما عدا ذلك يُحسب أثناء الـ render. فالمتوسّط هو مجموع تقييمات المُشاهَد ÷ عددها، والقائمة المرتّبة نسخة مرتّبة من الأفلام حسب الترتيب المختار، و«هل الترتيب حسب السنة» ليس إلا sortOrder === 'year'. وتخزين أيٍّ منها يُنشئ نسخة ثانية قد تصبح قديمة.
isSortedByYear تُستخدم لتنسيق القائمة المنسدلة","why":"مشتقّة. إنها sortOrder === 'year'. وإبقاؤها في state خاص بها يسمح لها بأن تختلف عن الترتيب الفعلي."}}},"words":579,"readMinutes":3}