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

---

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

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

---

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

الخصائص (الخصائص)

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

الحالة

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

---

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

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

---

الحديث عن React: الاستخدام المُحدَّث

الهوكات للحالة

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

import { useState } from "React";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Increment</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، لكن النظام البيئي حولهما يتطور باستمرار. من خلال دمجها مع hooks وcontext ومميزات React 18 الجديدة، ستبني تطبيقات تكون عالية الأداء وقابلة للتوسع.

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

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

---