الفرق بين المراجعتين لصفحة: «ReactNative/state»
Basema-bakleh (نقاش | مساهمات) |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الحالة في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:الحالة State في React Native}}</noinclude> | ||
هناك نوعان من البيانات التي تتحكم بالمكوّن وهي: [[ReactNative/props|الخاصياتُ <code>props</code>]] والحالةُ <code>state</code>. يتم تعيين الخاصيّات من قبل المكوّن الأب وتكون ثابتةً طوال حياة المكوّن، أمّا بالنسبة للبيانات التي ستتغيّر، فعلينا استخدام الحالة. | هناك نوعان من البيانات التي تتحكم بالمكوّن وهي: [[ReactNative/props|الخاصياتُ <code>props</code>]] والحالةُ <code>state</code>. يتم تعيين الخاصيّات من قبل المكوّن الأب وتكون ثابتةً طوال حياة المكوّن، أمّا بالنسبة للبيانات التي ستتغيّر، فعلينا استخدام الحالة. | ||
عمومًا عليك تهيئة (initialize) الحالة في الدّالة البانية ([[JavaScript/class|constructor]])، ثم استدعاء <code>setState</code> عندما تريد تغييرها. | عمومًا عليك تهيئة (initialize) الحالة في الدّالة البانية ([[JavaScript/class|constructor]])، ثم استدعاء <code>setState</code> عندما تريد تغييرها. | ||
لنفترض مثلًا أننا نريد إنشاء نصٍّ يومض كلّّ ثانيّة طوال وقت إظهاره، عندها يتمّ ضبط النصّ نفسه مرّةً واحدةً عند إنشاء المكوّن الذي يومض، لذا فالنّص نفسه خاصيّةٌ، أمّا "كون النص ظاهر أو مخفيٌّ" فهو شرطٌ يتغيّر بمرور الوقت، لذلك يجب حفظه في الكائن <code>state</code>: | لنفترض مثلًا أننا نريد إنشاء نصٍّ يومض كلّّ ثانيّة طوال وقت إظهاره، عندها يتمّ ضبط النصّ نفسه مرّةً واحدةً عند إنشاء المكوّن الذي يومض، لذا فالنّص نفسه خاصيّةٌ، أمّا "كون النص ظاهر أو مخفيٌّ" فهو شرطٌ يتغيّر بمرور الوقت، لذلك يجب حفظه في الكائن <code>state</code> انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/state تجربة حية]): | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||
| سطر 44: | سطر 42: | ||
في تطبيق واقعيّ أغلب الظّن أنك لن تُغيِّر الحالة بمُؤقّتٍ كما في الشيفرة أعلاه، قد تُغيّرها عند وصول بياناتٍ جديدةٍ من الخادم، أو من مُدخَل يُدخله مستخدم التطبيق. يمكنك كذلك استخدام حاوي حالةٍ (state container) مثل [https://redux.js.org/ Redux] أو [https://mobx.js.org/ Mobx] للتحكم في تدفق البيانات، في هذه الحالة، يمكنك استخدام Redux أو Mobx لتغيير الحالة بدلاً من استدعاء <code>setState</code> مباشرةً. | في تطبيق واقعيّ أغلب الظّن أنك لن تُغيِّر الحالة بمُؤقّتٍ كما في الشيفرة أعلاه، قد تُغيّرها عند وصول بياناتٍ جديدةٍ من الخادم، أو من مُدخَل يُدخله مستخدم التطبيق. يمكنك كذلك استخدام حاوي حالةٍ (state container) مثل [https://redux.js.org/ Redux] أو [https://mobx.js.org/ Mobx] للتحكم في تدفق البيانات، في هذه الحالة، يمكنك استخدام Redux أو Mobx لتغيير الحالة بدلاً من استدعاء <code>setState</code> مباشرةً. | ||
عند استدعاء setState سيُعيد المُكوّن BlinkApp تصيير | عند استدعاء setState سيُعيد المُكوّن BlinkApp تصيير مكوّنه، ويعيد استدعاءُ setState داخل المؤقِّت تصيير (re-render) المكوّن في كل مرة تدقّ فيها عقارب المؤقِّت. | ||
استدعاءُ setState داخل المؤقِّت | |||
تعمل الحالة بنفس طريقة عملها في | تعمل الحالة بنفس طريقة عملها في [[React]]، لذلك للحصول على مزيد من التفاصيل حول معالجة الحالة، يمكنك إلقاء نظرة على واجهة <code>[[React/react component|React.Component]]</code> البرمجيّة. | ||
قد | قد تستغرب من أنّ معظم الأمثلة تستخدم النّص الأسود الافتراضي المملّ. لنتعلّم كيفيّة [[ReactNative/style|تنسيق التطبيقات]]. | ||
== مصادر == | == مصادر == | ||
* [https://facebook.github.io/react-native/docs/state صفحة State في توثيق React Native الرسميّ] | * [https://facebook.github.io/react-native/docs/state صفحة State في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
مراجعة 13:09، 30 أغسطس 2021
هناك نوعان من البيانات التي تتحكم بالمكوّن وهي: الخاصياتُ 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 البرمجيّة.
قد تستغرب من أنّ معظم الأمثلة تستخدم النّص الأسود الافتراضي المملّ. لنتعلّم كيفيّة تنسيق التطبيقات.