الحالة في React Native

الحالة (State)

هناك نوعان من البيانات التي تتحكم بالمكوّن: الخاصياتُ ‎props‎ والحالةُ ‎state‎. يتم تعيين الخاصيات من قبل المكوّن الأب وتكون ثابتة طوال حياة المكوّن. أمّا بالنسبة للبيانات التي ستتغيّر، فعلينا استخدام الحالة.

عمومًا، عليك تهيئة (initialize) الحالة في الدالة البانية (constructor)، ثم استدعاء ‎setState‎ عندما تريد تغييرها.

على سبيل المثال، لنفترض أننا نريد إنشاء نصٍّ يومض طوال الوقت. يتم ضبط النصّ نفسه مرة واحدة عند إنشاء المكوّن الذي يومض، لذا فالنّص نفسه خاصيّة. أمّا "ما إذا كان النص ظاهرًا أو مخفيًّا" فهو شرطٌ يتغيّر بمرور الوقت، لذلك يجب حفظه في الكائن ‎state‎:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { isShowingText: true };

    // تغيير الحالة كل ثانيّة
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }

  render() {
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

في تطبيق واقعيّ، أغلب الظّن أنك لن تُغيِّر الحالة بمُؤقّتٍ كما في الشيفرة أعلاه. قد تُغيّرها عند وصول بيانات جديدة من الخادم، أو من مُدخَل يُدخله مستخدم التطبيق. يمكنك كذلك استخدام حاوي حالةٍ (state container) مثل Redux أو Mobx للتحكم في تدفق البيانات. في هذه الحالة، يمكنك استخدام Redux أو Mobx لتغيير الحالة بدلاً من استدعاء ‎setState‎ مباشرةً.

عند استدعاء setState، سيُعيد المُكوّن ‎BlinkApp‎ تصيير مكوّنه.

استدعاءُ ‎setState‎ داخل المؤقِّت يُعيد تصيير (re-render) المكوّن في كل مرة تدقّ فيها عقارب المؤقِّت.

تعمل الحالة بنفس طريقة عملها في React، لذلك للحصول على مزيد من التفاصيل حول معالجة الحالة، يمكنك إلقاء نظرة على واجهة ‎React.Component‎ البرمجيّة.

قد تنزعج من أنّ معظم الأمثلة تستخدم النّص الأسود الافتراضي المملّ. لنتعلّم كيفيّة تنسيق التطبيقات وتجميلها.

مصادر

• صفحة State في توثيق React Native الرسمي.