تتم إدارة البيانات الموجودة داخل مكونات 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>
);
}
}
تحديث الـ 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() {
//
}
}