Frontend Academy · درس

خطاف useState: الحالة وإعادة التصيير

استدعِ useState لإضافة حالة محلية إلى مكوّن، وحدّث الحالة باستخدام دالة setter، وافهم متى ولماذا يعيد React التصيير.

الدرس 3 من 413 خطوة

خطاف useState: الحالة وإعادة التصيير درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما الحالة؟

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

صيغة useState

تعيد useState(initialValue) صفيفًا ثنائيًا: القيمة الحالية ودالة مُعيِّنة. فكّكهما مباشرةً.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

TypeScript: تحديد نوع useState

يستنتج TypeScript النوع من القيمة الأولية. وعندما تكون القيمة الأولية ملتبسة، مثل null أو مصفوفة فارغة، أضف معامل نوع صريحًا.

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

إعادة العرض عند تغيّر الحالة

يجدول استدعاء الدالة المُعيِّنة إعادة العرض. ويستدعي React دالة المكوّن مرة أخرى بقيمة الحالة الجديدة. ويستبدل JSX المُعاد العرض السابق في DOM الافتراضي.

تحديثات الحالة غير متزامنة

تُجمَّع تحديثات الحالة وتُطبَّق قبل العرض التالي، لا فورًا. لا تقرأ الحالة المحدّثة في معالج الحدث نفسه؛ فالقيمة الجديدة لا تتوفر حتى العرض التالي.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

التحديثات الوظيفية

عندما تعتمد الحالة الجديدة على الحالة السابقة، استخدم الصيغة الوظيفية للدالة المُعيِّنة. فهذا يتجنب أخطاء الإغلاق المتقادم.

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

الحالة مع الكائنات

عندما تكون الحالة كائنًا، أنشئ دائمًا كائنًا جديدًا؛ ولا تعدّل الكائن الموجود. يقارن React المراجع، ولن تؤدي التعديلات إلى إعادة العرض.

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

متغيرات الحالة المتعددة

استدعِ useState عدة مرات لمتغيرات الحالة المستقلة. وهذا أوضح من استخدام كائن حالة واحد كبير عندما لا تتغير القيم معًا.

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

التهيئة الكسولة

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

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

متى لا تستخدم الحالة

لا يحتاج كل متغير إلى أن يكون حالة. ينبغي حساب القيم المشتقة، مثل (total = items.reduce(…))، أثناء العرض لا تخزينها في الحالة. وتكون الحالة المشتقة من props عادةً علامة على الإفراط في التصميم.

رفع الحالة

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

اختبار سريع

لماذا ينبغي استخدام الصيغة الوظيفية setCount(prev => prev + 1) بدلًا من setCount(count + 1)؟

أجب عليها في الدرس التفاعلي

مراجعة: useState

تعيد useState ‏[value, setter]. تحدد القيمة الأولية النوع، أو استخدم معاملًا عامًا صريحًا. تؤدي الدالة المُعيِّنة إلى إعادة العرض. استخدم التحديثات الوظيفية عندما تعتمد الحالة الجديدة على القديمة. بالنسبة إلى الكائنات: انشر دائمًا إلى كائنات جديدة ولا تعدّل الكائنات مطلقًا. استخدم التهيئة الكسولة للحسابات المكلفة. ارفع الحالة إلى الأسلاف المشتركين عندما يحتاج الأشقاء إلى مشاركتها.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «خطاف useState: الحالة وإعادة التصيير» مجاني؟

نعم — نص درس «خطاف useState: الحالة وإعادة التصيير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «خطاف useState: الحالة وإعادة التصيير»؟

استدعِ useState لإضافة حالة محلية إلى مكوّن، وحدّث الحالة باستخدام دالة setter، وافهم متى ولماذا يعيد React التصيير. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «خطاف useState: الحالة وإعادة التصيير»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy