React Native – State

React Native

تتم إدارة البيانات الموجودة داخل مكونات React بواسطة state و props. في هذا الفصل سنتحدث عن state.

الفرق بين State و Props

الـ state قابلة للتغيير بينما props غير قابلة للتغيير. هذا يعني أنه يمكن تحديث state في المستقبل بينما لا يمكن تحديث props.

إستخدام State

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

App.js

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

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}
react native state

تحديث الـ State

نظرًا لأن state قابلة للتغيير، فيمكننا تحديثها عن طريق إنشاء وظيفةdeleteState واستدعائها باستخدام الحدث onPress = {this.deleteText}.

Home.js

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

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

ملاحظات : في جميع الفصول، سنستخدم بناء جملة الفئة للمكونات ذات الحالة (container) وبناء جملة الوظيفة للمكونات عديمة الحالة (presentational).

سوف نتعلم أيضًا كيفية استخدام صيغة دالة السهم لحالة updateState. يجب أن تضع في اعتبارك أن بناء الجملة هذا يستخدم النطاق المعجمي lexical scope ، وسيتم ربط هذه الكلمة الأساسية بكائن البيئة (الفئة). سيؤدي هذا في بعض الأحيان إلى سلوك غير متوقع.

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

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}

Related posts

Ionic – Javascript Content

Ionic – Javascript Action Sheet

Ionic Framework – نظرة عامة