كمطور React أو React Native ، من المهم فهم مفهوم الحاوية ومكونات العرض.
تساعد أنماط التصميم هذه في الفصل المناسب بين الاهتمامات. يمكنك استخدام هذا المفهوم لضمان هيكلة التعليمات البرمجية الخاصة بك بطريقة أكثر قابلية للصيانة وقابلة للتطوير.
ما هي مكونات الحاوية؟
تعتبر مكونات الحاوية ، المعروفة أيضًا باسم المكونات الذكية ، مسؤولة عن إدارة البيانات والمنطق في تطبيقك. يتعاملون مع مهام مثل جلب البيانات من واجهة برمجة التطبيقات وتحديث الحالة ومعالجة تفاعلات المستخدم.
لتنفيذ هذا الهيكل ، يمكنك استخدام مكتبة مثل React-Redux لتوصيل مكوناتك بالمتجر وتمرير البيانات والإجراءات إلى المكونات التابعة أو مكونات العرض التقديمي.
ما هي مكونات العرض؟
مكونات العرض هي المسؤولة عن عرض البيانات من مكوناتها الأصلية. غالبًا ما تكون عديمة الحالة وتركز على واجهة المستخدم والتمثيل المرئي للبيانات.
هذه الحالة تجعلها سهلة التلاعب والاختبار ، مما يكسبها اسم المكونات الغبية. تتيح لك الحالة الغبية لمكونات العرض إمكانية إعادة استخدامها عبر التطبيق بأكمله. هذا يتجنب التعليمات البرمجية الرديئة والمتكررة.
لماذا نستخدم الحاوية ومكونات العرض؟
الإجابة المختصرة والبسيطة على السؤال هي: فصل المخاوف. هذا مبدأ أساسي في العديد من النماذج ، بما في ذلك البرمجة الشيئية والوظيفية والموجهة إلى الجانب. ومع ذلك ، يميل العديد من مطوري React إلى تجاهل هذه المفاهيم واختيار كتابة التعليمات البرمجية التي تعمل فقط.
الكود الذي يعمل فقط رائع ، حتى يتوقف عن العمل. من الصعب صيانة وتحديث التعليمات البرمجية سيئة التنظيم. قد يجعل ذلك من الصعب إضافة ميزات جديدة أو جلب مبرمجين آخرين للعمل في المشروع. يعد إصلاح هذه المشكلات بمجرد إنشائها بالفعل عبئ عمل ، ومن الأفضل منعها من البداية.
يضمن تطبيق نمط تصميم الحاوية ومكونات العرض أن كل مكون داخل مشروعك لديه مهمة واضحة يقوم بها. يحقق هذا بنية معيارية حيث يجتمع كل مكون محسّن معًا لإكمال تطبيقك.
قد لا تزال مكوناتك تتداخل ؛ لا يكون تقسيم المهام بين الحاوية والمكون التقديمي مميزًا دائمًا. ومع ذلك ، كقاعدة عامة ، يجب أن تركز مكونات العرض على البيانات المرئية ومكونات الحاوية الخاصة بك على البيانات والمنطق.
كيفية استخدام مكونات الحاوية والعرض التقديمي في React Native
في تطبيق React Native النموذجي ، من الشائع إنشاء مكونات تحتوي على كلٍّ من الشفرة التقديمية والمتعلقة بالمنطق. يمكنك جلب البيانات من واجهة برمجة التطبيقات وإدارة حالة النموذج وعرض المخرجات كلها في فئة واحدة. ضع في اعتبارك تطبيقًا بسيطًا من شأنه جلب قائمة المستخدمين من واجهة برمجة التطبيقات وعرض أسمائهم وأعمارهم.
يمكنك القيام بذلك باستخدام مكون واحد ، ولكنه سينتج عنه رمز يصعب قراءته ، وغير قابل لإعادة الاستخدام ، ويصعب اختباره وصيانته.
على سبيل المثال:
يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {عرض ، نص ، قائمة مسطحة} من"رد فعل أصلي";مقدار ثابت UserList = () => {
مقدار ثابت [users، setUsers] = useState ([]) ؛useEffect (() => {
مقدار ثابت fetchUsers = غير متزامن () => {
مقدار ثابت استجابة = انتظر أحضر(' https://example.com/users');
مقدار ثابت البيانات = انتظر response.json () ؛
setUsers (البيانات) ؛
};fetchUsers () ،
}, []);يعود (
البيانات = {المستخدمين}
keyExtractor = {item => item.id}
renderItem = {({item}) => (الاسم: {item.name} </Text> العمر: {item.age} </Text>
</View>
)}
/>
);
};
يصدّرتقصير قائمة المستخدم؛
في هذا المثال، قائمة المستخدم مسؤول عن إدارة حالة حقل الإدخال ، وجلب البيانات من واجهة برمجة التطبيقات ، وتقديم البيانات.
الطريقة الأفضل والأكثر فاعلية لتنفيذ ذلك هي فصل المنطق في UserList إلى مكونات العرض التقديمي والحاوية.
يمكنك إنشاء ملف UserListContainer المكون المسؤول عن جلب وإدارة بيانات المستخدم. يمكنه بعد ذلك تمرير هذه البيانات إلى مكون عرضي ، قائمة المستخدم، كدعم.
يستورد React ، {useState ، useEffect} من'تتفاعل';// مكون الحاوية
مقدار ثابت UserListContainer = () => {
مقدار ثابت [users، setUsers] = useState ([]) ؛useEffect (() => {
مقدار ثابت fetchUsers = غير متزامن () => {
مقدار ثابت استجابة = انتظر أحضر(' https://example.com/users');
مقدار ثابت البيانات = انتظر response.json () ؛
setUsers (البيانات) ؛
};fetchUsers () ،
}, []);يعود<قائمة المستخدمالمستخدمين={المستخدمين} />;
};
يصدّرتقصير UserListContainer ؛
يمكنك فصل العرض التقديمي بين عنصرين تقديميين: مستخدم و قائمة المستخدم. كل منهم مسؤول عن إنشاء الترميز بناءً على دعائم الإدخال التي يتلقونها.
يستورد {عرض ، نص ، قائمة مسطحة} من"رد فعل أصلي";// عنصر العرض
مقدار ثابت المستخدم = ({الاسم ، العمر}) => (الاسم: {name} </Text> العمر: {age} </Text>
</View>
);
// عنصر العرض
مقدار ثابت UserList = ({المستخدمين}) => (
البيانات = {المستخدمين}
keyExtractor = {item => item.id}
renderItem = {({item}) => <مستخدماسم={اسم العنصر}عمر={item.age} />}
/>
);
يفصل الكود الجديد المكون الأصلي إلى مكونين عرضيين ، مستخدم و قائمة المستخدمومكون حاوية واحد ، UserListContainer.
أفضل الممارسات لتنفيذ الحاوية ومكونات العرض
عند استخدام مكونات الحاوية والعرض التقديمي ، من المهم اتباع بعض أفضل الممارسات لضمان عمل المكونات على النحو المنشود.
- يجب أن يكون لكل مكون دور واضح ومحدد. يجب أن يدير مكون الحاوية الحالة ويجب أن يتعامل المكون التقديمي مع العرض المرئي.
- حيثما أمكن ، استخدم المكونات الوظيفية بدلاً من مكونات الفئة. فهي أبسط وأسهل في الاختبار وتوفر أداءً أفضل.
- تجنب تضمين المنطق أو الوظيفة في مكون لا صلة له بالغرض منه. يساعد هذا في الحفاظ على المكونات مركزة وسهلة الصيانة والاختبار.
- استخدم الدعائم للتواصل بين المكونات ، وفصل المخاوف بوضوح وتجنب المكونات شديدة الاقتران.
- يمكن أن تؤدي التحديثات غير الضرورية للحالة إلى مشكلات في الأداء ، لذلك من المهم تحديث الحالة عند الضرورة فقط.
يضمن اتباع أفضل الممارسات هذه أن الحاوية ومكونات العرض التقديمي تعمل معًا بفعالية من أجل توفر حلاً نظيفًا ومنظمًا وقابلًا للتطوير لإدارة الحالة والعرض التقديمي المرئي في تطبيق React Native الخاص بك.
فوائد استخدام مكونات الحاوية والعرض
يمكن أن توفر مكونات الحاوية والعرض العديد من الفوائد. يمكن أن تساعد في تحسين بنية التعليمات البرمجية الخاصة بك ، وقابلية الصيانة ، وقابلية التوسع. كما أنها تؤدي إلى تعاون أفضل وتفويض المهام بين الفرق. يمكن أن تؤدي أيضًا إلى زيادة الأداء وتحسين تطبيق React Native الخاص بك.
اتبع أفضل الممارسات لتنفيذ هذه المكونات ، ويمكنك إنشاء تطبيقات React Native أفضل وأكثر قابلية للتوسع.
