دولة رد الفعل

كيف تتفاعل مع حالة مكوناتك

تحديد الحالة الافتراضية

في منشئ المكون ، قم بالتهيئةthis.state. على سبيل المثال ، قد يحتوي المكون BlogPostExcerpt على ملفclickedحالة:

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }

render() { return ( <div> <h1>Title</h1> <p>Description</p> </div> ) } }

الوصول إلى الدولة

النقرالدولة يمكن الوصول إليها من خلال الرجوع إليهاthis.state.clicked:

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }

render() { return ( <div> <h1>Title</h1> <p>Description</p> <p>Clicked: {this.state.clicked}</p> </div> ) } }

تحور الدولة

لا ينبغي أبدًا تحور حالة باستخدام

this.state.clicked = true

بدلا من ذلك ، يجب عليك دائما استخدامsetState()بدلاً من ذلك ، قم بتمريره كائنًا:

this.setState({ clicked: true })

يمكن أن يحتوي الكائن على مجموعة فرعية ، أو مجموعة شاملة ، من الحالة. سيتم تغيير الخصائص التي تمر بها فقط ، وسيتم ترك الخصائص التي تم حذفها في حالتها الحالية.

لماذا يجب عليك دائما استخدامsetState()

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

تدفق البيانات أحادي الاتجاه

الدولة مملوكة دائمًا لمكون واحد. أي بيانات تتأثر بهذه الحالة يمكن أن تؤثر فقط على المكونات الموجودة أدناه: العناصر الفرعية لها.

لن يؤثر تغيير الحالة على أحد المكونات أبدًا على الأصل أو أشقائه أو أي مكون آخر في التطبيق: فقط العناصر الفرعية.

هذا هو السبب في أن الحالة غالبًا ما يتم نقلها لأعلى في شجرة المكونات.

تحريك الدولة لأعلى في الشجرة

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

في كثير من الأحيان يكون أقرب سلف هو أفضل مكان لإدارة الولاية ، لكنه ليس قاعدة إلزامية.

يتم تمرير الحالة إلى المكونات التي تحتاج إلى تلك القيمة عبر الدعائم:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }

render() { return ( <div> <Display currency={this.state.currency} /> <CurrencySwitcher currency={this.state.currency} /> </div> ) } }

يمكن تحور الحالة بواسطة مكون فرعي عن طريق تمرير دالة متحولة إلى أسفل كدعم:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }

handleChangeCurrency = event => { this.setState({ currency: this.state.currency === ‘€’ ? ‘$’ : ‘€’ }) }

render() { return ( <div> <Display currency={this.state.currency} /> <CurrencySwitcher currency={this.state.currency} handleChangeCurrency={this.handleChangeCurrency} /> </div> ) } }

const CurrencySwitcher = props => { return ( <button onClick={props.handleChangeCurrency}> Current currency is {props.currency}. Change it! </button> ) }

const Display = props => { return <p>Current currency is {props.currency}.</p> }

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: