إدارة الحالة (State) في React

الدرس الخامس: إدارة الحالة (State) في React

في هذا الدرس، سنتعلم كيفية التعامل مع الحالة (State) في React، الفرق بين props و state، كيفية استخدام useState لإدارة الحالة في function components، وكيفية تحديث وعرض البيانات المتغيرة في واجهة المستخدم.

1. ما هي state؟

الحالة (State) هي البيانات التي يحتفظ بها المكون ويمكن أن تتغير بمرور الوقت. على عكس props، التي تُمرر من المكونات العليا إلى المكونات السفلى وتُعتبر قراءة فقط، يمكن تحديث state داخل المكون نفسه. state تُستخدم لتخزين المعلومات التي يمكن أن تتغير وتؤثر على كيفية عرض واجهة المستخدم.

مثال على استخدام state:

افترض أننا نريد أن نعرض عدادًا يتغير عند الضغط على زر:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

في هذا المثال:

• count هو قيمة state التي تبدأ من 0.
• setCount هو دالة لتحديث قيمة state.
• عند الضغط على الزر، يتم تحديث state، مما يؤدي إلى إعادة render المكون مع القيمة الجديدة.

2. الفرق بين props و state

بينما كلا من props و state يُستخدمان لتمرير البيانات داخل تطبيق React، إلا أن هناك اختلافات جوهرية بينهما:

الميزة	props	state
الهدف	تمثل البيانات التي تُمرر من مكون إلى آخر.	تمثل البيانات الداخلية التي يمكن أن تتغير داخل المكون.
القراءة والكتابة	لا يمكن تغييرها من المكون المتلقي.	يمكن تعديلها داخل المكون باستخدام setState (أو useState في المكونات الوظيفية).
التغيير	ثابتة (لا تتغير داخل المكون المتلقي).	يمكن أن تتغير (مما يؤدي إلى إعادة render للمكون).
التحكم	يتم التحكم بها في المكونات العليا.	يتم التحكم بها داخل المكون نفسه.

3. كيفية إنشاء وتحديث الـ state باستخدام useState

في React، يمكنك إدارة state في المكونات الوظيفية باستخدام hook يسمى useState. يسمح لك useState بإنشاء حالة (state) داخل المكون وتحديثها.

طريقة استخدام useState:

1. استيراد useState من React.
2. استخدام useState لإنشاء state.
3. useState يعود بمصفوفة تحتوي على قيمتين:
   • القيمة الحالية للحالة.
   • دالة لتحديث الحالة.

مثال على استخدام useState:

import React, { useState } from 'react';

function Counter() {
  // استخدام useState لإنشاء state
  const [count, setCount] = useState(0);

  const increase = () => {
    setCount(count + 1); // تحديث القيمة
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increase}>Click me</button>
    </div>
  );
}

export default Counter;

في هذا المثال:

• useState(0): يبدأ count من 0.
• setCount(count + 1): عند الضغط على الزر، يتم تحديث state باستخدام setCount.
• count: هي القيمة الحالية للحالة ويتم استخدامها لعرض عدد النقرات.

4. إظهار البيانات المتغيرة في واجهة المستخدم

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

مثال على عرض البيانات المتغيرة في واجهة المستخدم:

import React, { useState } from 'react';

function Message() {
  const [message, setMessage] = useState('Hello, World!');

  const changeMessage = () => {
    setMessage('Welcome to React!');
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={changeMessage}>Change Message</button>
    </div>
  );
}

export default Message;

في هذا المثال:

• message هو state الذي يحتوي على نص معين.
• عند الضغط على الزر، تتغير قيمة message باستخدام setMessage.
• React يعيد render المكون ويعرض النص الجديد في واجهة المستخدم.

5. المصفوفات والكائنات في state

يمكن تخزين المصفوفات والكائنات في state، ولكن عند تعديلها، يجب عليك استخدام الدالة المخصصة لتحديث state. يجب أن تكون حذرًا عند تعديل المصفوفات والكائنات لأن React يعتمد على المرجعية (references) للكشف عن التغييرات.

مثال على استخدام المصفوفات في state:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([...items, 'New Item']); // إضافة عنصر جديد
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

export default App;

في هذا المثال:

• items هو state يحتوي على مصفوفة من العناصر.
• عند الضغط على الزر، يتم إضافة عنصر جديد إلى state باستخدام setItems.

6. الختام

في هذا الدرس:

• تعلمنا كيفية استخدام state في React لإدارة البيانات المتغيرة.
• فهمنا الفرق بين props و state.
• تعرفنا على كيفية إنشاء وتحديث state باستخدام useState.
• تعلمنا كيفية عرض البيانات المتغيرة في واجهة المستخدم عندما تتغير state.

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