---
title: Component State
localeTitle: حالة المكون
---
## حالة المكون
في مكونات `Class` ، توجد طريقة لتخزين وإدارة الحالة المدمجة في React Native.
`class App extends Component {
constructor () {
super();
this.state = {
counter: 0
};
}
incrementCount () {
this.setState({
counter: this.state.counter + 1
});
}
decrementCount () {
this.setState({
counter: this.state.counter - 1
});
}
render () {
return (
Count: {this.state.counter}
);
}
}
`
الحالة مشابهة للدعائم ، ولكنها خاصة ويتم التحكم فيها بالكامل بواسطة المكون. هنا ، يتم استدعاء الأسلوب `constructor()` فئة الأصل "المنشئ `super();` - **`Component`** هو الفئة الرئيسية `App` لأننا نستخدم الكلمة الرئيسية `extends` . تقوم أداة `constructor()` أيضًا بتهيئة كائن حالة المكون:
`this.state = {
counter: 0
};
`
يمكن عرض الحالة داخل المكون:
`{this.state.counter}
`
أو تحديثه عن طريق الاتصال:
`this.setState({});
`
**ملاحظة:** بصرف النظر عن الإنشاء المبدئي في طريقة `constructor()` المكون `constructor()` ، يجب ألا تقوم أبدًا بتعديل حالة المكوّن مباشرةً بهذا `this.state =` . يجب استخدام هذا `this.setState` كما يمكن رؤيته في الدالتين `incrementCount` و `decrementCount` أعلاه.
يتم زيادة العدد `onPress` عن طريق استدعاء الدالات التي تم تمريرها إلى معالجات `onPress` مثلما لو كانت تسمى معالج النقر من JavaScript على الويب.
_بصيغة ASIDE: في المثال الأول ، يعد `