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

title	localeTitle
State vs Props	الدولة مقابل الدعائم

الدولة مقابل الدعائم

عندما نبدأ العمل مع مكونات React ، فإننا نسمع بشكل متكرر فترتين. هم state props . لذلك ، في هذه المقالة سوف نستكشف ما هي تلك وكيف تختلف.

حالة:

• الدولة هي شيء يمتلكه المكون. إنه ينتمي إلى ذلك المكون المحدد حيث يتم تعريفه. على سبيل المثال ، عمر الشخص هو حالة ذلك الشخص.
• الدولة قابلة للتغيير. ولكن لا يمكن تغييره إلا عن طريق ذلك العنصر الذي يملكه. لأنني لا أستطيع سوى تغيير عمري ، وليس أي شخص آخر.
• يمكنك تغيير حالة باستخدام هذا this.setState()

انظر المثال أدناه للحصول على فكرة عن الحالة:

Person.js

` import React from 'react';

class Person extends React.Component{ constructor(props) { super(props); this.state = { age:0 this.incrementAge = this.incrementAge.bind(this) }

incrementAge(){ 
  this.setState({ 
    age:this.state.age + 1; 
  }); 
} 

render(){ 
  return( 
    <div> 
      <label>My age is: {this.state.age}</label> 
      <button onClick={this.incrementAge}>Grow me older !!<button> 
    </div> 
  ); 
} 

}

export default Person; `

في المثال أعلاه ، age هو مكون حالة Person .

الدعائم:

• الدعائم تشبه حجج الأسلوب. يتم تمريرها إلى مكون حيث يتم استخدام هذا المكون.
• الدعائم غير قابلة للتغيير. هم للقراءة فقط.

انظر المثال أدناه للحصول على فكرة من الدعائم:

Person.js

` import React from 'react';

class Person extends React.Component{ render(){ return(

I am a {this.props.character} person.

); } }

export default Person;

const person = `

في المثال أعلاه ، const person = <Person character = "good"></Person> نقوم بتمرير character = "good" للدعم إلى مكون Person .

يعطي الناتج "أنا شخص جيد" ، في الحقيقة أنا.

هناك الكثير لتعلمه على State and Props. يمكن تعلم الكثير من الأشياء عن طريق الغوص في الترميز. حتى الحصول على يديك القذرة بواسطة الترميز.

اتصل بي على twitter إذا لزم الأمر.

الترميز سعيدة!