---
title: React خصائص و React الحالة — دليل كامل (2025)
description: دليل واضح لـ React props مقابل state مع hooks, context, أمثلة، وأفضل الممارسات لعام 2025.
url: https://nerdleveltech.com/ar/react-props-and-state-2025
language: ar
date: '2022-09-17'
updated: '2026-05-05'
category: frontend
tags:
  - react
  - props
  - state
  - hooks
  - context
markdown_url: https://nerdleveltech.com/ar/react-props-and-state-2025.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/ar/react-props-and-state-2025'
terms: https://nerdleveltech.com/llms.txt
---

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

---

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

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

---

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

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

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

### الحالة

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

---

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

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

---

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

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

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

```jsx
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 لمشاكل تمرير الخصائص

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

```jsx
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` عند الضرورة.

---

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

```jsx
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! 🚀

---