رفع الحالة في React: مشاركة الحالة بين المكوّنات

رفع الحالة يعني نقل الحالة من المكوّنات التي تحتاج إلى مشاركتها إلى أقرب أب مشترك لها. يحتفظ الأب بالقيمة، ويمررها إلى الأسفل كـ prop، ويمرر دالة يستدعيها الأبناء لتغييرها، فيُعرض كل ابن من نسخة واحدة من الحالة.

import { useState } from 'react';

function Panel({ title, isOpen, onOpen, children }) {
    return (
        <section style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h3 style={{ margin: 0 }}>{title}</h3>
            {isOpen ? <p>{children}</p> : <button onClick={onOpen}>Show</button>}
        </section>
    );
}

export default function App() {
    const [openIndex, setOpenIndex] = useState(0);

    return (
        <div>
            <Panel title="Shipping" isOpen={openIndex === 0} onOpen={() => setOpenIndex(0)}>
                Orders ship within two days.
            </Panel>
            <Panel title="Returns" isOpen={openIndex === 1} onOpen={() => setOpenIndex(1)}>
                Return anything within 30 days.
            </Panel>
            <Panel title="Warranty" isOpen={openIndex === 2} onOpen={() => setOpenIndex(2)}>
                Two years on every product.
            </Panel>
        </div>
    );
}

انقر "Show" على أي لوحة: تنفتح وتنغلق اللوحة التي كانت مفتوحة. لا يمكن أن تنفتح إلا لوحة واحدة في كل مرة لأن اللوحات لا تقرر ذلك بنفسها. يحتفظ App بالقيمة openIndex، ولا يستقبل كل Panel إلا isOpen ودالة onOpen.

المشكلة: حالة ينبغي أن تتفق

ابدأ من النسخة البديهية، حيث تملك كل لوحة حالتها isOpen. كل لوحة تعمل، لكن اللوحات لا تعرف شيئًا عن بعضها، فلا شيء يمنع اثنتين منها من الانفتاح معًا.

import { useState } from 'react';

function Panel({ title, children }) {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <section style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h3 style={{ margin: 0 }}>{title}</h3>
            {isOpen ? <p>{children}</p> : <button onClick={() => setIsOpen(true)}>Show</button>}
        </section>
    );
}

export default function App() {
    return (
        <div>
            <Panel title="Shipping">Orders ship within two days.</Panel>
            <Panel title="Returns">Return anything within 30 days.</Panel>
        </div>
    );
}

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

رفع الحالة في ثلاث خطوات

تحويل المثال الثاني إلى الأول يتطلب ثلاثة تعديلات.

1. أزل الحالة من الابن. احذف useState في Panel واقرأ isOpen من props بدلًا منها. لم يعد الابن يقرر ما إذا كان مفتوحًا.
2. مرّر القيمة ووسيلة لتغييرها من الأب. يحصل Panel على isOpen ودالة استدعاء onOpen. يستدعي الابن onOpen() عندما يُنقر زره؛ ولا يعرف ما يفعله الأب بذلك.
3. أضف الحالة إلى الأب المشترك. يعلن App القيمة openIndex ويحوّلها إلى props لكل لوحة: isOpen={openIndex === 1} وonOpen={() => setOpenIndex(1)}.

أقرب أب مشترك هو أدنى مكوّن يعرض كل المكوّنات التي تحتاج إلى الحالة. وهو هنا App. لو كانت اللوحات داخل مكوّن Faq، لذهبت الحالة إلى Faq، لا أعلى منه.

بعد الرفع، يكون Panel متحكمًا به من أبيه بالمعنى نفسه الذي للحقل المتحكم به: يعرض ما تقوله props ويبلّغ عن التغييرات عبر دالة استدعاء. تتناول صفحة المكوّنات المتحكم بها وغير المتحكم بها الفكرة نفسها لعناصر النماذج.

مصدر وحيد للحقيقة

عندما يعرض جزءان من الشاشة الحقيقة نفسها، خزّن تلك الحقيقة مرة واحدة واحسب كل ما عداها منها. محوّل درجات الحرارة هو الحالة الكلاسيكية: يجب أن يتفق حقلا Celsius وFahrenheit دائمًا، فلا يمكن أن يحتفظ كل منهما برقمه الخاص.

import { useState } from 'react';

const round = (n) => Math.round(n * 10) / 10;
const toF = (c) => round((c * 9) / 5 + 32);
const toC = (f) => round(((f - 32) * 5) / 9);

function TemperatureInput({ label, value, onChange }) {
    return (
        <label style={{ display: 'block', marginBottom: 8 }}>
            {label}{' '}
            <input
                type="number"
                value={value}
                onChange={(e) => onChange(e.target.value)}
                style={{ width: 80 }}
            />
        </label>
    );
}

export default function App() {
    const [temp, setTemp] = useState({ value: '20', scale: 'c' });

    const number = Number(temp.value);
    const empty = temp.value === '';
    const celsius = temp.scale === 'c' || empty ? temp.value : toC(number);
    const fahrenheit = temp.scale === 'f' || empty ? temp.value : toF(number);

    return (
        <div>
            <TemperatureInput
                label="Celsius"
                value={celsius}
                onChange={(value) => setTemp({ value, scale: 'c' })}
            />
            <TemperatureInput
                label="Fahrenheit"
                value={fahrenheit}
                onChange={(value) => setTemp({ value, scale: 'f' })}
            />
            <p>{Number(celsius) >= 100 ? 'Water boils.' : 'Water does not boil.'}</p>
        </div>
    );
}

اكتب في أي من الحقلين فيتبعه الآخر. الحالة حقيقة واحدة: الرقم الذي كتبه المستخدم آخر مرة والمقياس الذي كان فيه. ويُحسب الحقل الآخر منها أثناء العرض، فيحتفظ الحقل الذي تكتب فيه دائمًا بما كتبته بالضبط. غيّر الحالة الابتدائية إلى { value: '212', scale: 'f' } فتتحول الرسالة أسفل الحقلين إلى "Water boils."

الاحتفاظ برقم Celsius ورقم Fahrenheit في قطعتين من الحالة يعني أن على كل معالج تحديث الاثنين، وفي أول مرة ينسى فيها معالج ذلك يختلف الحقلان. أما قيمة واحدة مخزنة فلا يمكن أن تختلف مع نفسها.

تمرير دالة الضبط إلى الأسفل

لا يستطيع الابن تغيير حالة الأب إلا عبر دالة يعطيه إياها الأب. يمكنك تمرير دالة الضبط نفسها (onSelect={setColor}) أو دالة تفعل أكثر (onOpen={() => setOpenIndex(1)}). إعطاء الـ prop اسمًا بأسلوب الأحداث مثل onSelect أو onChange، بدلًا من setSelected، يُبقي الابن غير مدرك لكيفية تخزين الأب للقيمة، فيستطيع الأب تغيير ذلك لاحقًا دون لمس الابن.

import { useState } from 'react';

function ColorPicker({ colors, selected, onSelect }) {
    return (
        <div>
            {colors.map((c) => (
                <button
                    key={c}
                    onClick={() => onSelect(c)}
                    style={{ background: c, color: 'white', border: selected === c ? '3px solid black' : 'none', marginInlineEnd: 4 }}
                >
                    {c}
                </button>
            ))}
        </div>
    );
}

function Preview({ color }) {
    return <p style={{ color, fontSize: 24, fontWeight: 700 }}>Hello in {color}</p>;
}

export default function App() {
    const [color, setColor] = useState('teal');

    function handleSelect(c) {
        console.log('App sets color to', c);
        setColor(c);
    }

    return (
        <div>
            <ColorPicker colors={['teal', 'tomato', 'slateblue']} selected={color} onSelect={handleSelect} />
            <Preview color={color} />
        </div>
    );
}

لا يتحدث ColorPicker وPreview مع بعضهما أبدًا. يبلّغ منتقي اللون عن اختيار إلى الأعلى، ويخزنه App، وتتدفق القيمة الجديدة إلى الأسفل إلى كليهما.

متى لا ترفع الحالة

للرفع تكلفة. عندما تعيش الحالة في أب، يعيد كل تغيير عرض الأب، وافتراضيًا كل أبنائه، بما فيهم من لا يستخدمون الحالة. ارفع فقط حتى أقرب أب مشترك، واترك الحالة التي لا يستخدمها إلا مكوّن واحد داخل ذلك المكوّن.

import { useState } from 'react';

function SearchBox() {
    const [query, setQuery] = useState('');
    console.log('render SearchBox');
    return <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Type here" />;
}

function ProductList() {
    console.log('render ProductList');
    return (
        <ul>
            <li>Keyboard</li>
            <li>Mouse</li>
        </ul>
    );
}

export default function App() {
    return (
        <div>
            <SearchBox />
            <ProductList />
        </div>
    );
}

اكتب في المربع وراقب وحدة التحكم: لا يُعرض مع كل ضغطة مفتاح إلا SearchBox. انقل الآن query إلى App ومررها إلى SearchBox كـ props. عندها تسجّل كل ضغطة مفتاح ProductList أيضًا، رغم أن القائمة لا تستخدم الاستعلام. لو كانت القائمة ترشح بحسب الاستعلام، لكان الرفع هو القرار الصحيح، لأن المكوّنين سيعتمدان حينها على القيمة نفسها.

السؤال الذي تطرحه هو «من يحتاج إلى قراءة هذه القيمة؟» إذا كان الجواب مكوّنًا واحدًا، تبقى الحالة هناك. وإذا كان عدة مكوّنات، تذهب إلى أقرب أب مشترك لها.

عندما يذهب الرفع بعيدًا جدًا

أحيانًا يكون أقرب أب مشترك بعيدًا في أعلى الشجرة، ويجب تمرير القيمة عبر عدة مكوّنات لا تفعل سوى تسليمها. هذا هو تمرير props عبر الطبقات. بضع طبقات من props لا بأس بها وسهلة التتبع. وعندما تسافر القيمة نفسها عبر طبقات كثيرة، أو يحتاجها كل مكوّن تقريبًا (المستخدم المسجّل، أو السمة، أو اللغة)، فاقرأها بـ useContext بدلًا من تمريرها يدويًا. يغيّر السياق كيفية وصول القيمة إلى الأبناء؛ أما الحالة نفسها فما زالت تعيش في أب واحد، فهي ما زالت مرفوعة.