React الخصائص و React الحالة — دليل شامل (2025)

---

قوة React تكمن في كيفية إدارتها لتدفق البيانات داخل التطبيقات. سواء كنت تبني مكونات صغيرة أو تطبيقات واسعة النطاق، فإن فهم الخصائص والحالة أمر بالغ الأهمية. هاتان المفهومان الأساسيان يحددان كيفية تمرير البيانات وتحديثها وعرضها في بيئة React.

منذ عام 2022، تطورت React مع ميزات React 18، والمقتطفات، وتحسينات السياق، ومكونات الخادم، مما جعل من الأهمية بمكان إعادة النظر في كيفية استخدامنا للخصائص والحالة في التطوير الحديث. يشرح هذا الدليل ما هي هذه المفاهيم، وكيف تختلف، وأفضل الممارسات التي يجب على كل مطور اتباعها في عام 2025.

---

ما هي الخصائص والحالة؟

الخصائص (Properties)

• مدخلات تُمرر من المكون الأب إلى المكون الفرعي.
• غير قابلة للتغيير (قراءة فقط داخل المكون الفرعي).
• تُستخدم لـ التكوين، عرض البيانات، والاتصال.
• أمثلة: title, user, onClick ردود الفعل.

الحالة

• بيانات يملكها المكون ويتحكم فيها.
• قابلة للتغيير، تُحدَّث باستخدام المقاطع مثل useState أو useReducer.
• تُستخدم لـ السلوك التفاعلي: المفاتيح، النماذج، استرداد البيانات، تحديثات الواجهة.
• مثال: قيم حقول النموذج، حالة فتح/إغلاق النافذة المنبثقة، أو عداد.

---

الخصائص مقابل الحالة: الفروق الأساسية

الجانب	الخصائص	الحالة
الملكية	تُمرر من المكون الأب	تحتفظ بها داخل المكون
القابلية للتغيير	قراءة فقط	يمكن تحديثها باستخدام المقاطع
الغرض	تكوين المكونات، تمرير البيانات والمنطق	تتبع وإدارة التغييرات المحلية
مُحفز التحديثات	إعادة العرض عند إعادة عرض المكون الأب	إعادة العرض عند تغيير الحالة

---

React الحديث: الاستخدام المحدث

المقاطع للحالة

بدلًا من this.setState (المكونات الكلاسيكية)، يستخدم React الحديث المقاطع:

import { useState } from "React";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>لقد نقرت {count} مرات</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

سياق API لمشاكل تمرير الخصائص

تجنب تمرير الخصائص عبر طبقات متعددة باستخدام السياق:

import { createContext, useContext } from "React";

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

React 18+ تحسينات

• الدمج التلقائي: يتم دمج تحديثات الحالة المتعددة لأداء أفضل.
• الانتقالات: تحديثات واجهة مستخدم أكثر سلاسة للعرض المتزامن.
• مكونات الخادم: بعض اعتبارات الخاصيات/الحالة تنتقل إلى التصوير الهجين.

---

أفضل الممارسات (طبعة 2025)

1. احتفظ بالحالة بأدنى حد — خزّن فقط ما لا يمكنك استنتاجه من الخصائص أو الحالة الأخرى.
2. ارفع الحالة لأعلى فقط عندما تحتاج عدة أطفال إلى الوصول إليها.
3. استخدم السياق أو المتاجر العالمية (Redux Toolkit، Zustand، Recoil) عند مشاركة حالة معقدة.
4. تحقق من الخصائص باستخدام PropTypes، أو بشكل مثالي، TypeScript.
5. تجنّب إعادة التصيير غير الضرورية — استخدم React.memo، useCallback، و useMemo.
6. تحديثات غير قابلة للتغيير فقط — لا تُعدّل المصفوفات/الكائنات مباشرة.
7. أحمِ التأثيرات الجانبية — نظّف دائمًا باستخدام useEffect حيثما كان ذلك ضروريًا.

---

مثال: دمج الخصائص والحالة والسياق

import React, { useState, useCallback, createContext, useContext } from "React";
import PropTypes from "prop-types";

const ThemeContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <ThemeContext.Provider value="dark">
      <Counter count={count} onIncrement={increment} />
    </ThemeContext.Provider>
  );
}

function Counter({ count, onIncrement }) {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ color: theme === "dark" ? "#fff" : "#000" }}>
      <p>You clicked {count} times</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

Counter.propTypes = {
  count: PropTypes.number.isRequired,
  onIncrement: PropTypes.func.isRequired,
};

export default App;

---

الاستنتاج

الخصائص والحالة هما أساس تطوير React، لكن النظام البيئي المحيط بهما يظل قيد التطور. من خلال دمجهما مع المقاطع والسياق وميزات React 18 الجديدة، ستقوم ببناء تطبيقات ذات أداء عالٍ وقابلة للتوسع.

إتقان هذه الأساسيات يضمن لك القدرة على الدخول بثقة إلى أنماط React المتقدمة أكثر—مثل مكونات الخادم، وإدارة الحالة العالمية، وتحسين الأداء.

احافظ على فضولك، ومارس بانتظام، واحرص على تحديث مهاراتك في React! 🚀

---