لديك الآن نموذج لإضافة الأفلام، وقائمة أفلام، وأزرار فلترة. كل منها يعمل وحده. ضعها على شاشة واحدة ولن يتحدّث بعضها مع بعض: لا يستطيع النموذج الإضافة إلى قائمة تعيش في component آخر، ولا تعرف القائمة أي زر فلترة مضغوط. لا تستطيع الـ components أن تمدّ يدها إلى الـ state الخاص ببعضها. هذا مقصود، والحلّ نمط ستستخدمه في كل تطبيق React تبنيه.
\nهذا شريط الفلترة كما قد تكتبه أول مرة:
\nfunction FilterBar() {\n const [filter, setFilter] = useState('all');\n return (\n <div>\n <button aria-pressed={filter === 'all'} onClick={() => setFilter('all')}>All</button>\n <button aria-pressed={filter === 'to-watch'} onClick={() => setFilter('to-watch')}>To watch</button>\n <button aria-pressed={filter === 'watched'} onClick={() => setFilter('watched')}>Watched</button>\n </div>\n );\n}يظهر الزر النشط مميّزًا بشكل صحيح، لكن MovieList أخ له. لا يصل إلى filter، فيعرض كل شيء مهما نقرت. الـ state خاص بالـ component الذي يعلن عنه.
اعثر على أقرب component يكون أبًا لكل ما يحتاج إلى الـ state. بالنسبة إلى الفلتر، هو App، أب كلٍّ من FilterBar وMovieList. انقل الـ state إليه، ثم:
export default function App() {\n const [movies, setMovies] = useState(INITIAL_MOVIES);\n const [filter, setFilter] = useState('all');\n\n const visible = movies.filter((m) =>\n filter === 'all' ? true : filter === 'watched' ? m.watched : !m.watched,\n );\n\n function handleAdd(title) {\n setMovies([...movies, { id: crypto.randomUUID(), title, watched: false }]);\n }\n\n return (\n <main>\n <Header movies={movies} />\n <AddMovieForm onAdd={handleAdd} />\n <FilterBar value={filter} onChange={setFilter} />\n <MovieList movies={visible} />\n </main>\n );\n}\n\nfunction FilterBar({ value, onChange }) {\n return (\n <div role=\"group\" aria-label=\"Filter movies\">\n <button aria-pressed={value === 'all'} onClick={() => onChange('all')}>All</button>\n <button aria-pressed={value === 'to-watch'} onClick={() => onChange('to-watch')}>To watch</button>\n <button aria-pressed={value === 'watched'} onClick={() => onChange('watched')}>Watched</button>\n </div>\n );\n}لم يعد لدى FilterBar أي state. إنه يعرض value ويبلّغ عن النقرات عبر onChange. ويُسمّى component كهذا controlled (متحكَّمًا به): أبوه يقرّر ما يعرضه. وصار الآن أسهل في الاختبار وإعادة الاستخدام، لأن كل ما يفعله ظاهر في الـ props الخاصة به.
لاحظ الشكل. البيانات تتدفّق نزولًا في الشجرة كـ props: movies وfilter وvisible. والتغييرات تتدفّق صعودًا كاستدعاءات دوال: النموذج يستدعي onAdd، وشريط الفلترة يستدعي onChange. ولا يستدعي setMovies أو setFilter إلا App.
هذه هي الثمرة. إذا عرضت القائمة يومًا أفلامًا خاطئة، فهناك مكان واحد بالضبط يقرّر ما فيها. تتبع الـ props صعودًا إلى مالكها وتقرأ الكود الذي يغيّرها. قارن ذلك بتطبيق يستطيع فيه أي component أن يعبث بأي component آخر: قد يأتي الخطأ من أي مكان.
\nوانظر أيضًا إلى ما ليس state. تُحسب visible من movies وfilter في كل render، ويشتقّ Header العدد من movies. رفع الـ state لا يعني رفع كل شيء؛ بل يعني مالكًا واحدًا لكل قطعة state حقيقية، وكل ما عداها مشتقّ منها.
نادرًا ما تخطّط لكل قطعة state بشكل مثالي من البداية. تكتشف الحاجة إلى الرفع أثناء البناء، والعلامات ثابتة:
\nكل واحدة من هذه تعني أن للبيانات نفسها مالكين، أو أن المالك منخفض جدًا في الشجرة. والرفع إعادة هيكلة صغيرة وآلية: اقطع سطر useState، والصقه في الأب، واستبدل الـ state القديم في الابن بـ props.
للرفع ثمن: المالك يعيد الـ render حين يتغيّر الـ state، ومعه أبناؤه، والـ props تضطر إلى قطع مسافة أطول. فلا ترفع كل شيء إلى App بحكم العادة.
النص الذي يُكتب في حقل العنوان مثال جيد. لا يهتمّ به إلا AddMovieForm أثناء الكتابة. أمّا App فلا يحتاج إلا إلى العنوان النهائي، الذي يصله من onAdd. لذا تبقى المسوّدة في النموذج. وإذا احتاج component آخر لاحقًا إلى معاينة المسوّدة، فسترفعها حينها.
وحين يحتاج إلى الـ state components متباعدة في الشجرة، يصبح تمريره عبر كل مستوى مملًّا. رأيت حلًّا في درس التركيب (تمرير العناصر إلى الأسفل)، والـ context في React هو الحل الآخر. أمّا Watchlist فتكفيه بضعة props.
\n\nصار لـ Watchlist مصدر واحد للحقيقة وثلاثة components تقرؤه وتغيّره. في الدرس التالي تزامن هذا الـ state مع شيء خارج React، أي عنوان تبويب المتصفّح وlocalStorage، باستخدام الـ effects.
\n","toc":[{"id":"sec-1","text":"المشكلة: الإخوة لا يتشاركون","level":2},{"id":"sec-2","text":"الحلّ: ارفعه إلى الأب المشترك","level":2},{"id":"sec-3","text":"البيانات تنزل، والأحداث تصعد","level":2},{"id":"sec-4","text":"علامات أنك تحتاج إلى الرفع","level":2},{"id":"sec-5","text":"في أدنى مكان ممكن، وأعلى مكان ضروري","level":2}],"takeaways":["حين يحتاج componentان إلى البيانات المتغيّرة نفسها، انقل الـ state إلى أقرب أب مشترك لهما ومرّره إلى الأسفل كـ props.","يغيّر الأبناء الـ state المشترك باستدعاء props من نوع المعالجات مثلonAdd أو onFilterChange؛ البيانات تنزل والأحداث تصعد.","أبقِ كل قطعة state في أدنى مكان ممكن من الشجرة، لكن في أعلى مكان ضروري.","لا تنسخ prop إلى state باستخدام useState(prop)؛ فالنسخة تتجاهل التغييرات اللاحقة. استخدم الـ prop مباشرة أو اشتقّ منه."],"further":[{"title":"Sharing State Between Components","url":"https://react.dev/learn/sharing-state-between-components"},{"title":"Choosing the State Structure","url":"https://react.dev/learn/choosing-the-state-structure"}],"quiz":[{"q":"يحتفظ FilterBar بـ const [filter, setFilter] = useState('all'). ويحتاج أخوه MovieList إلى عرض الأفلام المطابقة للفلتر فقط. ما الإصلاح؟
filter إلى كليهما، ومرّر setFilter (أو معالجًا) إلى FilterBar.","why":"صحيح. مالك واحد ومصدر واحد للحقيقة. يعرض FilterBar القيمة ويغيّرها، ويقرؤها MovieList."},{"text":"اجعل MovieList ابنًا لـ FilterBar حتى يستطيع قراءة الـ state.","why":"إعادة ترتيب شجرة الواجهة لتناسب البيانات أمر معكوس، وستبقى الترويسة التي تعدّ الأفلام خارج الحلّ."}],"answer":2},{"q":"أيّ قطعة من state في Watchlist يجب أن تبقى داخل AddMovieForm بدل رفعها إلى App؟
onAdd."},{"text":"قائمة الأفلام.","why":"الترويسة والقائمة والنموذج كلها تعتمد على الأفلام، فمكانها App."},{"text":"الفلتر الحالي.","why":"أزرار الفلترة والقائمة كلتاهما تحتاجانه، فيعيش في أبيهما المشترك."}],"answer":0},{"q":"يعرض MovieTitle عنوانًا يستقبله كـ prop. وحين يغيّر الأب اسم الفيلم، يظل الابن يعرض العنوان القديم. لماذا؟
function MovieTitle({ title }) {\n const [text] = useState(title);\n return <h2>{text}</h2>;\n}onChange.","why":"العناوين ليست لها أحداث تغيير. المشكلة في مصدر النص."},{"text":"لا تستخدم useState وسيطها إلا في الـ render الأول، فتكون text نسخة مجمّدة. اعرض {title} مباشرة.","why":"صحيح. القيمة الابتدائية تُقرأ مرة واحدة. وإذا لم يكن الـ component بحاجة إلى تعديل القيمة، فلا ينبغي أن ينسخها إلى الـ state."}],"answer":3},{"q":"في Watchlist تنزل البيانات كـ props وتصعد التغييرات عبر الـ callbacks. ما الفائدة الأساسية لهذا التدفّق باتجاه واحد؟
","options":[{"text":"يجعل React ترسم أسرع من الربط ثنائي الاتجاه.","why":"الأداء ليس الهدف؛ الفائدة تتعلّق بفهم تطبيقك وتتبّع أخطائه."},{"text":"لتعرف لماذا يعرض شيء ما قيمة معيّنة، تتبع الـ props صعودًا إلى الـ component الوحيد الذي يملك الـ state.","why":"صحيح. لكل قطعة state مالك واحد، ووحده يغيّرها، فيكون للأخطاء مكان واحد تبحث فيه."},{"text":"يلغي الحاجة إلى معالجات الأحداث.","why":"الـ callbacks معالجات أحداث تُمرَّر إلى الأسفل، والتدفّق باتجاه واحد يعتمد عليها."}],"answer":1}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nconst MOVIES = [\n { id: 'a1', title: 'Arrival', watched: true },\n { id: 'p2', title: 'Past Lives', watched: false },\n { id: 'd3', title: 'Dune: Part Two', watched: false },\n];\n\nfunction MovieList({ movies }) {\n return (\nيظهر زر الفلترة النشط مميّزًا بشكل صحيح، لكن القائمة لا تتغيّر أبدًا، لأن FilterBar يحتفظ بالفلتر لنفسه.
ارفع state الفلتر إلى App. مرّر القيمة الحالية وطريقة لتغييرها إلى FilterBar (يجب ألّا يكون له state خاص به)، وأعطِ MovieList الأفلام المطابقة فقط:
watched هي falsewatched هي trueأبقِ aria-pressed على الأزرار تعمل.
const [filter, setFilter] = useState('all') من FilterBar إلى App.","امنح FilterBar اثنين من الـ props، مثل value وonChange، واستخدمهما مكان الـ state القديم.","في App، اشتقّ القائمة: MOVIES.filter((m) => filter === 'all' ? true : filter === 'watched' ? m.watched : !m.watched)."],"explanation":"الـ state خاص بالـ component الذي يعلن عنه، فلا يستطيع أخوه قراءته أبدًا. نقل filter إلى App، أقرب أب مشترك، يمنحه مالكًا واحدًا. ويصبح FilterBar component متحكَّمًا به يعرض value ويبلّغ عن النقرات عبر onChange، ويشتقّ App الأفلام الظاهرة من MOVIES وfilter في كل render بدل تخزين نسخة مصفّاة.