الحالة State في React Native

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

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

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

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

const Blink = (props) => {
  const [isShowingText, setIsShowingText] = useState(true);

   useEffect(() => {
     const toggle = setInterval(() => {
       setIsShowingText(!isShowingText);
     }, 1000);

     return () => clearInterval(toggle);
  })

  if (!isShowingText) {
    return null;
  }

  return <Text>{props.text}</Text>;
}

const BlinkApp = () => {
  return (
    <View style={{marginTop: 50}}>
      <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>
  );
}

export default BlinkApp;

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

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

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

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

مصادر

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