رد فعل هو واحد من الأطر جافا سكريبت الأكثر شعبية التي تسمح للمطورين لإنشاء واجهات المستخدم سريعة وقابلة للتطوير ، وقابلة لإعادة الاستخدام. يعد استخدام المكونات أحد المبادئ الأساسية لـ رد فعل ، وغالبا ما تكون هناك حاجة لنقل البيانات بين المكونات المختلفة.
في هذه المقالة ، سنلقي نظرة على بعض أفضل الطرق لمشاركة المعلومات بين مكونات التفاعل. أولا ، يمكنك استخدام طرق نقل البيانات عبر الدعائم. تسمح لك الدعائم بنقل البيانات من مكون إلى آخر ، وهي غير قابلة للتغيير للمكون الأصل. هذه واحدة من أبسط الطرق وأكثرها استخداما لنقل البيانات.
ثانيا ، يمكنك استخدام السياق لنقل البيانات بين المكونات دون تمرير صراحة يمر من خلال كل مكون. يوفر السياق طريقة لمشاركة البيانات بين المكونات في تسلسل هرمي دون الحاجة إلى تمرير التمريرات عبر المكونات الوسيطة. على الرغم من أن السياق يمكن أن يكون مفيدا في بعض الحالات ، إلا أنه لا ينبغي إساءة استخدامه ، حيث يمكن أن يؤدي ذلك إلى تعقيد التعليمات البرمجية وضعف القراءة.
وأخيرا ، واحدة من أقوى الطرق لنقل البيانات بين المكونات هو استخدام الدولة العالمية ، على سبيل المثال ، وذلك باستخدام مديري الدولة مثل ريدوكس أو موبكس. تسمح الحالة العالمية بتبادل البيانات بين المكونات دون الحاجة إلى إرسال تصاريح صريحة أو استخدام السياق. ومع ذلك ، يمكن أن يؤدي استخدام الحالة العامة إلى تعقيد الكود ويتطلب تكوينا إضافيا.
من المهم اختيار الطريقة المناسبة لنقل البيانات بين المكونات ، اعتمادا على المهمة المحددة ومتطلبات المشروع. سيسمح لك الاستخدام الصحيح لأساليب تبادل المعلومات بإنشاء تطبيقات تفاعل أكثر مرونة وكفاءة.
- كيفية العمل مع البيانات في رد فعل: طرق فعالة لتبادل المعلومات بين المكونات
- 1. الدعائم
- 2. السياق
- 3. مسترجع
- 4. باعث الحدث
- استخدام خصائص المكون
- تطبيق السياق على نقل البيانات
- سؤال وجواب
- ما هي الطرق الأكثر شعبية لنقل البيانات بين المكونات في رد فعل?
- ما هو الدعائم وكيفية نقل البيانات بين مكونات استخدامه?
- كيف يمكنني استخدام السياق لنقل البيانات بين المكونات?
- كيف يمكنني نقل البيانات بين المكونات عبر الدولة?
- ما هي مسترجع وموبكس وكيفية العمل معهم لنقل البيانات بين المكونات?
كيفية العمل مع البيانات في رد فعل: طرق فعالة لتبادل المعلومات بين المكونات
رد فعل هو مكتبة جافا سكريبت شعبية لتطوير واجهات المستخدم. يستخدم نهجا قائما على المكونات لإنشاء عناصر قابلة لإعادة الاستخدام وتوفير تدفق واضح للبيانات بينها.
في هذه المقالة ، سننظر في عدة طرق فعالة لتبادل المعلومات بين المكونات في رد فعل. سيساعدونك في نقل البيانات من المكونات الرئيسية إلى المكونات الفرعية ، وكذلك بين المكونات على نفس مستوى التسلسل الهرمي.
1. الدعائم
.
على سبيل المثال ، في المكون الأصل:
الطبقة الوالدالمكون يمتد رد فعل.العنصر {
تقديم () {
العودة ;
}
}
في المكون الفرعي:
فئة الطفلمكون يمتد رد فعل.العنصر {
تقديم () {
عودة (
الاسم: {this.props.name}
عمر: {هذا.الدعائم.العمر}
);
}
}
نتيجة لذلك ، سيتم عرض الصفحة:
الاسم: جون
العمر: 25
أو عبر مكون أعلى مرتبة
ويثكونتيكست
.
هنا مثال على استخدام السياق:
// خلق سياق
كونست ميكونتيكست = رد فعل.كريتيكونتيكست();
// مزود المكون الرئيسي
الطبقة الوالدالمكون يمتد رد فعل.العنصر {
تقديم () {
عودة(
);
}
}
// العنصر الفرعي
من فئة الطفلمكون يمتد رد فعل.العنصر {
العودة
{هذا.السياق}
؛ / / عرض بيانات السياق
}
}
نتيجة لذلك ، سيتم عرض الصفحة:
أهلاً
3. مسترجع
مسترجع هي مكتبة لإدارة حالة تطبيق في رد فعل. يسمح لك بتخزين البيانات ومشاركتها بين المكونات باستخدام التخزين العالمي.
لاستخدام ريدوكس في رد فعل ، تحتاج إلى ربط ريدوكس و رد فعل-ريدوكس المكتبات ، إنشاء مستودع ، والتفاف المكون الجذر للتطبيق في مزود التخزين.
Red مسترجع:
/ /ux مسترجع
- نبم تثبيت ريدوكس رد فعل ريدوكس
// Создание хранилища
استيراد { كريتستور } من 'ريدوكس';
وظيفة العداد (الدولة = 0 ، العمل) {
التبديل (العمل.نوع) {
حالة 'زيادة':
عودة الدولة + 1;
حالة'إنقاص':
عودة الدولة-1;
الافتراضي:
عودة الدولة;
}
}
كونست ستور = كريتستور (عداد);
// Обертка корневого компонента в провайдер хранилища
استيراد { مزود } من 'رد فعل مسترجع';
رد الفعل.تقديم(
,
В дочерних компонентах данные из хранилища доступны через функцию
الاتصال
react رد فعل مسترجع:
استيراد { الاتصال } من 'رد فعل مسترجع';
العودة
عداد: {هذا.الدعائم.عداد}
;
}
}
كونست مابستاتيتوبروبس = الدولة = > ({
العداد: الدولة
});
تصدير الافتراضي الاتصال (مابستاتيتوبروبس) (تشايلدكومبوننت);
يوفر مسترجع آلية قوية ومرنة لتبادل البيانات بين المكونات ، ولكن قد تكون زائدة عن الحاجة في بعض الحالات البسيطة.
4. باعث الحدث
باعث الحدث هو نمط التصميم الذي يسمح لك لإنشاء واستخدام الأحداث على التواصل بين المكونات في رد فعل.
Наиболее популярной библиотекой для реализации Event Emitter в React является EventEmitter3.
Установка библиотеки:
$ npm install eventemitter3
Создание экземпляра Event Emitter и использование событий:
import EventEmitter from 'eventemitter3';
const emitter = new EventEmitter();
class ComponentA extends React.Component {
componentDidMount() {
emitter.on('customEvent', this.handleCustomEvent);
}
componentWillUnmount() {
emitter.removeListener('customEvent', this.handleCustomEvent);
}
handleCustomEvent = (data) => {
// обработка события
}
render() {
return
Component A
;
}
}
class ComponentB extends React.Component {
handleClick = () => {
emitter.emit('customEvent', { data: 'Hello' });
}
render() {
return (
Component B
);
}
}
В результате при клике на кнопку «Component B» событие «customEvent» будет сгенерировано и обработано в компоненте «Component A».
يعتمد اختيار طريقة تبادل البيانات في التفاعل على المتطلبات المحددة للمشروع وتعقيد التفاعل بين المكونات. غالبا ما يكون الاستخدام البسيط للدعائم كافيا ، ولكن في بعض الحالات قد تكون الآليات الأكثر قوة مثل السياق أو الارتداد أو باعث الحدث أكثر ملاءمة.
الخصائص هي قيم غير قابلة للتغيير يتم تمريرها إلى مكون عند إنشائه. يمكن أن تكون من أي نوع بيانات — بدائية ، كائنات ، وظائف ، إلخ.
لتمرير خاصية إلى مكون تابع ، يكفي تحديده في جسكس كسمة:
:
وظيفة الطفلمكون (الدعائم) {
العودة
قيمة العقار: {الدعائم.بروبنام}
;
}
يتيح لك استخدام خصائص المكونات إنشاء مكونات مرنة وقابلة لإعادة الاستخدام يمكن تكوينها بقيم مختلفة. يمكن أيضا استخدام الخصائص لنقل وظائف رد الاتصال من المكون الأصل ، مما يسمح للمكونات الفرعية بالتفاعل مع الأصل.
مثال على استخدام خصائص المكون:
وظيفة الوالد () {
كونست هاندلكليك = () = > {
تنبيه ('انقر!');
}
عودة (
);
يمر خصائص
النص
و
أونكليك
إلى المكون الفرعي
لاستخدام سياق ، تحتاج أولا إلى إنشاء سياق باستخدام
. تقوم هذه الوظيفة بإرجاع كائن سياق يتكون من مكونين:
و
المستهلك
.
مزود الخدمة
- مكون يحد من نطاق السياق. يتلقى قيمة (بيانات) واحدة أو أكثر ويمررها إلى جميع المكونات المتداخلة.
المستهلك
- مكون يسمح لك بالحصول على القيمة التي تم تمريرها من الموفر ، داخل نفسه أو في مكونات متداخلة أخرى.
مثال على استخدام سياق لنقل البيانات:
{`
استيراد رد فعل ، { كريتكونتيكست ، أوسيكونتيكست } من "رد فعل";
// خلق سياق
كونست ميكونتيكست = كريتكونتيكست();
// مكون يوفر البيانات من خلال السياق
وظيفة ميبروفيدر (الدعائم) {
قيمة كونست = "هنا هي البيانات التي سيتم إرسالها";
عودة (
{الدعائم.الأطفال}
);
}
// المكون الذي سيتلقى البيانات من خلال السياق
وظيفة المستهلك () {
قيمة كونست = أوسيكونتيكست (ميكونتيكست);
العودة
{القيمة}
;
تصدير التطبيق الافتراضي;
وظيفة كريتيكونتيكست ()
يستخدم المكونات التي تم إنشاؤها
بلدي المستهلك
، أين المكون نفسه
ميبروفيدر
يلف مكونا في حد ذاته
بلدي المستهلك
لتمرير البيانات اللازمة إليها من خلال السياق.
وبالتالي ، فإن المكون
بلدي المستهلك
سترى القيمة التي تم تمريرها عبر السياق وستكون قادرة على استخدامها في وظيفة العرض الخاصة بها أو نقلها إلى مكونات أخرى.
يمكن أن يكون استخدام السياق لنقل البيانات طريقة ملائمة وفعالة ، ولكن يجب استخدامه بحذر. يمكن أن يؤدي الاستخدام المتزايد للسياق إلى كود أكثر تعقيدا ويجعل من الصعب تتبع تدفقات البيانات. لذلك ، يوصى باستخدام السياق فقط لنقل البيانات العامة أو البيانات الضرورية للعديد من المكونات ويصعب نقلها باستخدام طرق أخرى (على سبيل المثال ، استخدام الدعائم).
سؤال وجواب
ما هي الطرق الأكثر شعبية لنقل البيانات بين المكونات في رد فعل?
في رد الفعل ، الطرق الأكثر شعبية لنقل البيانات بين المكونات هي: نقل البيانات عبر الدعائم ، وذلك باستخدام السياق ، ونقل البيانات عبر الدولة ، ونقل البيانات عبر ريدوكس أو موبكس.