رفع الحالة إلى الأعلى: المبادئ والأمثلة

مرحبًا

المشكلة: المكوّنات الشقيقة غير المتزامنة

تحديد السلف المشترك

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

مثال على رفع حالة العداد

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

خصائص الاستدعاء العكسي للتحديثات

المكوّن المتحكم فيه مقابل غير المتحكم فيه بعد رفع الحالة

رفع الحالة عبر عدة مستويات

فوائد رفع الحالة

الحالة المشتقة من الحالة المرفوعة

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

متى يصبح رفع الحالة مفرطًا؟

اختبار سريع

مراجعة

التالي