freeCodeCamp/guide/arabic/react/react-props-state/index.md

---
title: React Props and State
localeTitle: رد فعل الدعائم والدولة
---
## الدعائم والدولة

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

### الدعائم

يمكن تخصيص معظم المكونات بمعلمات مختلفة عند إنشائها. تسمى هذه المعلمات إنشاء `props` .

يمكن للمكونات الخاصة بك أيضا استخدام الدعائم. يتيح لك ذلك إنشاء مكون واحد يتم استخدامه في العديد من الأماكن المختلفة في تطبيقك ، مع خصائص مختلفة قليلاً في كل مكان. ارجع إلى `this.props` في وظيفة العرض:

```
class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

const element = <Welcome name="neel" />;
``` 

ينشئ السطر `<Welcome name="neel" />` اسم خاصية بقيمة `"neel"` .

يتم تمرير الخاصية إلى المكون ، تشبه كيفية تمرير وسيطة إلى دالة. في الواقع ، يمكننا حتى إعادة كتابة المكون ليكون أكثر بساطة:

```
function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}
``` 

يمكننا جعل خاصية الاسم اختيارية بإضافة defaultProps إلى فئة الترحيب:

```
class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

Welcome.defaultProps = {
  name: "world",
};
``` 

إذا تم استدعاء Welcome بدون اسم ، فسيتم عرض `<h1> Hello world</h1>` .

يمكن أن تأتي `props` من الأصل ، أو يمكن تعيينها بواسطة المكون نفسه.

لقد اعتدت أن تكون قادرًا على تغيير الدعامات باستخدام setProps و replaceProps ولكن تم **إهمالها** . خلال دورة حياة المكون ، يجب ألا تتغير الدعامات (اعتبرها غير قابلة للتغيير).

بما أن الدعائم يتم تمريرها ، ولا يمكن تغييرها ، يمكنك التفكير في أي مكون React الذي يستخدم فقط الدعائم (وليس الحالة) على أنها "نقية" ، أي أنه سيؤدي دائمًا إلى تقديم نفس المخرجات وفقًا للإدخال نفسه. هذا يجعلها سهلة الاختبار.

### حالة

مثل `props` ، تحمل `state` معلومات حول المكون. ومع ذلك ، يختلف نوع المعلومات وكيفية التعامل معها.

بشكل افتراضي ، لا يحتوي أي مكون على حالة. عنصر `Welcome` من الأعلى عديم الحالة:

```
function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}
``` 

عندما يحتاج أحد المكونات إلى تتبع المعلومات بين عمليات العرض ، يمكن للمكون نفسه إنشاء وتحديث واستخدام الحالة.

سنعمل مع مكون بسيط إلى حد ما لرؤية `state` تعمل في العمل. لدينا زر يتتبع عدد المرات التي نقرت فيها.

هنا الرمز:

```
class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}
``` 

### يتم إنشاء الحالة في المكون

دعونا ننظر إلى طريقة `constructor` :

```
constructor() {
  super();
  this.state = {
    count: 0,
  };
}
``` 

هذا هو المكان الذي تحصل فيه الدولة على بياناتها الأولية. يمكن أن تكون البيانات الشفوية مشفرة بشكل صارم (على النحو الوارد أعلاه) ، ولكنها يمكن أن تأتي أيضًا من `props` .

### `state` قابلة للتغيير

إليك طريقة `updateCount` :

```
updateCount() {
  this.setState((prevState, props) => {
    return { count: prevState.count + 1 }
  });
}
``` 

نقوم بتغيير الحالة لتتبع إجمالي عدد النقرات. الشيء المهم هو setState. أولا ، لاحظ أن setState يأخذ وظيفة ، وهذا لأنه يمكن تشغيل setState بشكل غير متزامن. يجب أن تأخذ وظيفة رد اتصال بدلاً من تحديث الحالة مباشرة. يمكنك أن ترى أن لدينا إمكانية الوصول إلى prevState داخل معاودة الاتصال ، سيحتوي ذلك على الحالة السابقة ، حتى إذا كانت الولاية قد تم تحديثها بالفعل في مكان آخر.

الرد يخطو خطوة واحدة نحو أفضل، setState بتحديث `state` الكائن **وإعادة** يجعل-المكون التلقائى.

### تحذيرات `state`

> من المغري كتابة هذا `this.state.count = this.state.count + 1` .

**لا تفعل هذا** React لا يمكن الاستماع إلى حالة الحصول على تحديث بهذه الطريقة ، لذلك لن إعادة تقديم المكون الخاص بك. دائما استخدام `setState` .

قد يكون من المغري أيضًا كتابة شيء كهذا:

```
// DO NOT USE
this.setState({
  count: this.state.count + 1
});
``` 

على الرغم من أن هذا قد يبدو معقولاً ، إلا أنه لا يرمي الأخطاء ، وقد تجد أمثلة تستخدم هذه الصيغة على الإنترنت ، إلا أنها خاطئة. هذا لا يأخذ في الاعتبار الطبيعة `setState` التي يمكن أن `setState` وقد يسبب أخطاء مع بيانات حالة التزامن.

### تابع البرنامج !!!

وأخيرا ، `render`

```
render() {
  return (<button
            onClick={() => this.updateCount()}
          >
            Clicked {this.state.count} times
          </button>);
}
``` 

`onClick={() => this.updateCount()}` يعني أنه عند النقر فوق الزر سيتم استدعاء أسلوب updateCount. نحتاج إلى استخدام **وظيفة السهم** ES6 حتى يتمكن updateCount من الوصول إلى حالة هذا المثيل.

يتم عرض النص الذي تم `Clicked {this.state.count} times` في الزر `Clicked {this.state.count} times` ، والذي سيستخدم أيًا من هذا التاريخ.الجملة في وقت التقديم.

مزيد من المعلومات حول: [**رد فعل الدعائم والدولة**](https://facebook.github.io/react-vr/docs/components-props-and-state.html)