الحالة المحلية مع useState

امنح مكوّناتك ذاكرة بواسطة useState لتتمكّن من عرض قيم تتغيّر مع تفاعل المستخدم.

8 دقيقة · 3 أسئلة

عدّاد إعجابات، النص المكتوب في حقل بحث، قائمة تُفتح وتُغلق: كل هذه القيم تتغيّر أثناء استعمال التطبيق. المتغيّر العادي لا يكفي، لأن React لا يُحدّث الشاشة عندما يتغيّر. تحتاج إلى ما يُسمّى الحالة: ذاكرة تخصّ المكوّن. تنشئها بواسطة useState، وهو hook، أي دالة خاصة يوفّرها React ويبدأ اسمها بـ use.

import { useState } from "react";

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

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

لنحلّل السطر الأساسي: const [count, setCount] = useState(0);. useState(0) ينشئ حالة بالقيمة الابتدائية 0 ويُرجع مصفوفة من عنصرين، تلتقطهما عبر التفكيك: count هي القيمة الحالية، و setCount هي دالة التحديث، الطريقة الوحيدة المسموح بها لتغيير تلك القيمة. هنا، يُطلق onClick الأمر setCount(count + 1) عند كل نقرة (سنتناول الأحداث بالتفصيل في الدرس القادم).

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

عندما تستدعي setName، يفعل React أمرين: يخزّن القيمة الجديدة، ثم يُعيد تشغيل دالة مكوّنك لإعادة حساب الناتج. يُسمّى هذا إعادة التصيير (re-render). لهذا يتحدّث فقرة Hello, {name}! من تلقاء نفسها مع كل حرف يُكتب: أنت تصف النتيجة، و React يتكفّل بالباقي.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ماذا يُرجع الاستدعاء useState(0)؟
   • القيمة الحالية للحالة فقط
   • مصفوفة تحوي القيمة الحالية ودالة تحديثها
   • كائناً يحوي كل حالات المكوّن
2. ما الطريقة الصحيحة لزيادة العدّاد؟
   • count = count + 1
   • useState(count + 1)
   • setCount(count + 1)
3. ماذا يحدث عندما تستدعي دالة تحديث الحالة؟
   • يُعيد React تشغيل المكوّن لتحديث العرض
   • تُعاد تحميل الصفحة كاملةً في المتصفّح
   • لا شيء، عليك أيضاً تحديث الصفحة يدوياً