مقدمة في خطافات React (Hooks): ما هو useState وكيف يغير واجهة المستخدم؟

مرحباً أيها المبرمجون!

اليوم سنتعمق في عالم React Hooks، وسنكتشف سحر useState وكيف يمكنه تغيير واجهة المستخدم الخاصة بنا ديناميكياً.

ما هو useState؟

قبل ظهور الخطافات (Hooks)، كانت المكونات الوظيفية (Functional Components) في React تُعرف بأنها "بلا حالة" (stateless). لكن useState غيّر هذا المفهوم جذرياً، مما سمح لنا بإضافة حالة داخلية (internal state) إلى المكونات الوظيفية. هذا يعني أن مكوناتنا يمكنها الآن تذكر البيانات والتفاعل معها، مما يجعلها أكثر ديناميكية وتفاعلية.

useState هو خطاف (Hook) يسمح لك بإضافة حالة React إلى المكونات الوظيفية. عند استدعائه، يُرجع زوجاً من القيم: القيمة الحالية للحالة، ودالة لتحديث تلك القيمة.

بناء مثال عملي: عداد بسيط

لنقم ببناء عداد بسيط يزداد رقمه عند النقر على زر. هذا سيساعدنا على فهم كيفية عمل useState وتفاعله مع واجهة المستخدم.

الخطوة 1: تهيئة المكون واستيراد useState

أولاً، سنقوم بإنشاء مكون وظيفي بسيط (على سبيل المثال، CounterApp) ونستورد خطاف useState من React.

import React, { useState } from 'react'; // استيراد React وخطاف useState

function CounterApp() {
  // هنا سنقوم بتعريف الحالة
  return (
    <div>
      <h2>عداد React بسيط</h2>
      {/* هنا سيتم عرض العداد وزر التحديث */}
    </div>
  );
}

export default CounterApp;

في هذه الخطوة، قمنا بإعداد هيكل المكون الأساسي واستوردنا useState، وهو أمر ضروري لاستخدامه.

الخطوة 2: تعريف الحالة الأولية وعرضها

الآن، لنستخدم useState لتعريف متغير حالة يسمى count مع قيمة أولية 0، ودالة لتحديثه تسمى setCount. ثم سنعرض قيمة count في واجهة المستخدم.

import React, { useState } from 'react';

function CounterApp() {
  // تعريف حالة 'count' بقيمة ابتدائية 0 ودالة تحديثها 'setCount'
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>عداد React بسيط</h2>
      <p>العداد الحالي: <strong>{count}</strong></p>
      {/* الزر سيأتي في الخطوة التالية */}
    </div>
  );
}

export default CounterApp;

لاحظ كيف أن useState(0) يعين القيمة الأولية لـ count إلى 0. عندما يتم عرض المكون لأول مرة، ستكون قيمة count هي 0.

الصيغة const [stateVariable, setStateVariable] = useState(initialValue); هي طريقة لـ "تفكيك المصفوفة" (Array Destructuring) في JavaScript. حيث stateVariable هو اسم لمتغير الحالة، و setStateVariable هي الدالة التي ستستخدمها لتحديث تلك الحالة.

الخطوة 3: تحديث الحالة والتفاعل مع واجهة المستخدم

الآن، لنضف زراراً (button) يسمح لنا بزيادة قيمة العداد. سنستخدم دالة setCount التي حصلنا عليها من useState لتحديث الحالة.

import React, { useState } from 'react';

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

  // دالة لمعالجة النقر على الزر وزيادة العداد
  const incrementCount = () => {
    setCount(count + 1); // تحديث قيمة العداد بزيادتها بمقدار 1
  };

  return (
    <div>
      <h2>عداد React بسيط</h2>
      <p>العداد الحالي: <strong>{count}</strong></p>
      <button onClick={incrementCount}>زيادة العداد</button> {/* ربط الدالة بالزر */}
    </div>
  );
}

export default CounterApp;

عند النقر على زر "زيادة العداد"، يتم استدعاء دالة incrementCount. هذه الدالة بدورها تستدعي setCount(count + 1). عندما يتم تحديث الحالة بواسطة setCount، يقوم React بإعادة عرض المكون (re-render) بقيمة count الجديدة، مما يعكس التغيير في واجهة المستخدم فوراً.

الكود النهائي الكامل

إليك الكود الكامل لمكون العداد الذي قمنا ببنائه:

import React, { useState } from 'react'; // 1. استيراد React وخطاف useState

function CounterApp() {
  // 2. تعريف حالة 'count' بقيمة ابتدائية 0 ودالة تحديثها 'setCount'
  const [count, setCount] = useState(0);

  // 3. دالة لمعالجة النقر على الزر وزيادة العداد
  const incrementCount = () => {
    setCount(count + 1); // تحديث قيمة العداد بزيادتها بمقدار 1
  };

  return (
    <div style={{ textAlign: 'center', fontFamily: 'Arial, sans-serif', padding: '20px', border: '1px solid #ddd', borderRadius: '8px', maxWidth: '400px', margin: '50px auto' }}>
      <h2 style={{ color: '#333' }}>عداد React بسيط باستخدام useState</h2>
      <p style={{ fontSize: '2em', margin: '20px 0', color: '#007bff' }}>العداد الحالي: <strong>{count}</strong></p>
      <button
        onClick={incrementCount} // ربط دالة incrementCount بحدث النقر
        style={{
          padding: '10px 20px',
          fontSize: '1em',
          backgroundColor: '#28a745',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
          transition: 'background-color 0.3s ease'
        }}
      >
        زيادة العداد
      </button>
    </div>
  );
}

export default CounterApp;

النتيجة المتوقعة

عند تشغيل هذا المكون في تطبيق React الخاص بك، سترى صفحة تحتوي على عنوان "عداد React بسيط باستخدام useState"، ونص "العداد الحالي: 0"، وزر أخضر مكتوب عليه "زيادة العداد". كلما نقرت على هذا الزر، ستزداد قيمة العداد المعروضة على الشاشة بمقدار واحد، مما يبرهن على قدرة useState على تحديث واجهة المستخدم ديناميكياً.

← السابقالفهرس