7 نصائح وحيل في React

استخدم TypeScript

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

استيراد PropTypes من 'prop-types'

دالة بطاقة المستخدم({المستخدم }) {
الإرجاع

{اسم المستخدم الأول}، {اسم المستخدم الأخير}

}

UserCard.propTypes = { {
مستخدم: PropTypes.form({
الاسم الأول: PropTypes.string.isRequired,
الاسم الأخير: PropTypes.string.isRequired
...
})
}

دالة UserList({المستخدمين }) {
إرجاع

{users.map((المستخدم)) => )} )

}

UserList.propTypes = {{
المستخدمين: PropTypes.arrayOf(PropTypes.form({
الاسم الأول: PropTypes.string.isRequired,
الاسم الأخير: PropTypes.string.isRequired
...
}))
}

واجهة المستخدم {
الاسم الأول: سلسلة!
الاسم الأخير: سلسلة!
...
}

دالة بطاقة المستخدم({المستخدم }: {المستخدم: مستخدم }) {
إرجاع

{اسم المستخدم الأول}، {اسم المستخدم الأخير}

}

دالة UserList({المستخدمون }: {المستخدمون: مستخدم[] }) {
إرجاع

{users.map((user)>(user)> )}

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

إلى جانب ذلك، فإن العديد من مكتبات جافا سكريبت المعروفة تنتقل إلى تايبسكريبت، على سبيل المثال: AdonisJS

مكونات العرض التقديمية والحاوية المنفصلة

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

مكونات العرض التقديمي معنيون ب كيف تبدو الأمور يتلقى البيانات والسلوك من المكونات الأصلية.

مكونات الحاوية معنيون ب كيف تسير الأمور فهي توفر البيانات والسلوك إلى المكونات التقديمية أو مكونات الحاوية الأخرى.

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

تحقق من المثال التالي مع مكوّن المستخدم الذي يُستخدم مع حاويات مختلفة توفر بيانات وسلوكيات مختلفة.

الدالة BuyerContainerContainer() {
إرجاع
}

دالة دالة حاوية البائع() { { {
إرجاع
}

دالة UserComponent({ اسم، onClick }) { {
الإرجاع

}

استخدم خطافات React والمكوّنات الوظيفية لم تعد المكوّنات الوظيفية "المشار إليها من قبل بالمكوّنات عديمة الحالة" عديمة الحالة بعد الآن. بفضل خطافات React، يمكنك الآن استخدام خطاف الحالة لتخزين الحالة في مكوّن وظيفي أو حتى استخدام دورة حياة المكوّن باستخدام useEffect. من السهل قراءة المكونات الوظيفية واختبارها. يحتوي React Core على بعض الخطافات المفيدة الأخرى التي يمكنك استكشافها في مرجع الخطافات. الأمر المدهش هو أنّه يمكنك أيضًا تحديد خطافاتك المخصصة. في المثال التالي، أنشأنا خطافًا مخصصًا للتفاعل يدعى useDebounce. والذي يُستخدم للحد من استدعاءات واجهة برمجة تطبيقات الإكمال التلقائي عندما يتغير نص الإدخال.

استيراد { استخدام التأثير } من 'رد فعل';
استيراد { debounce } من 'lodash';
تصدير الدالة الافتراضية useDebounce( fn، تأخير = 500 ) { {
const debounced = useMemoOne () () => debounce( fn، تأخير )، [
fn,
تأخير
] );
useEffect () () => () => debounced.cancounced.canc()، [ debounced ] );
إرجاع debounced;
}
تصدير الدالة الافتراضية دالة SearchComponent()
const fetchAutoComplete = استخدام ديبليكون ((e)) => {
      // واجهة برمجة تطبيقات الجلب (اختياري)
}, 1000) // 1 ثانية

إرجاع (

{...}
)
}

إلى جانب ذلك، تُعد خطافات React بديلاً رائعًا للمكونات ذات الترتيب الأعلى (HoCs). المكوّنات ذات الترتيب الأعلى المكوّنات ذات الترتيب الأعلى هي مكتبة تسمح بإدخال CSS الديناميكي على مستوى المكوّن مع الاستفادة من ES. تجعل مكوناتك أكثر قابلية للتنبؤ بها وقابلة لإعادة الاستخدام. لا داعي لإضاعة الكثير من الوقت في البحث عن اسم الفئة المناسب لعنصر ما مع محاولة تجنب استخدام اسم فئة موجود. مع المكوّنات المصممة تأكد من تحديد نطاق أنماطك إلى المكوّن وأسماء الفئات التي يتم إنشاؤها تلقائيًا في خطوة الإنشاء. بالإضافة إلى ذلك، لم يكن إنشاء CSS الديناميكي أسهل من أي وقت مضى. سيتم إنشاء أنماطك وفقًا للدعائم التي تم تمريرها إلى المكون. في المثال التالي، يعتمد نمط القسم على كل من الخاصية المحددة والقالب العام.

يشكل الغلاف = styled.div``

  الحدود: ${props => props.outlined ? '1px solid' : 'none'};

    الخلفية: ${props => props.theme.light ? 'أسود' : 'أبيض'}

النقطة الأخيرة حول المكونات المصممة هي أنها تحسن الأداء من خلال عدم تحميل أنماط غير ضرورية للمكونات غير المستخدمة. لنفترض أنك حددت تخطيطًا لتطبيق التفاعل الخاص بك، ثم تريد إضافة عنصر واجهة مستخدم في الشريط الجانبي لصفحة معينة فقط. إذا لم تفكر في هذه الحالة من البداية فقد يتطلب الأمر تغييرًا كبيرًا في التخطيط. ولكن باستخدام مكتبة مثل ‣ يمكنك فقط تحديد فتحة في الشريط الجانبي. ثم املأ تلك الفتحة بعناصر واجهة مستخدم لصفحات معينة فقط. بهذه الطريقة ستتجنب تمرير الإشارات على طول شجرة المكونات للوصول إلى الشريط الجانبي. لديه سلوك مشابه لبوابات React وهو أيضًا حل رائع لحالات مثل الوسائط، تلميحات الأدوات...

استورد { فتحة، تعبئة، موفر } من 'react-slot-fillot-fill';
المكوّن الشريط الجانبي = (الدعائم) =>
 
تصدير شريط الأدوات الافتراضي;
الشريط الجانبي.العنصر = (الخاصيات) => (الخاصيات) =>

{ { props.label }
يشكل القطعة = () => () =>
[

];
تشكل صفحة = ({الأطفال}) => =>

{أطفال}

const HomePage = () = () =>

صفحة بدون ويدجيت
const DashboardPage = () = () =>

صفحة مع Widjet

المكوّنات ذات الترتيب الأعلى حتى لو حلّت خطافات React محلّ المكوّنات ذات الترتيب الأعلى في معظم الحالات. لا تزال خطافات HoCs خيارًا رائعًا فيما يتعلّق بإخفاء التعقيد من المكوّنات مثل توفير خاصيّات متعدّدة لمكوّنات الصفحة أو التصيير الشرطي (المسارات الخاصّة، حالة التحميل ...) يوضّح المثال التالي كيف يمكننا تغليف تعقيد كل من المسارات الخاصّة وخاصيّات الصفحة المشتركة في خطافات HoCs قابلة لإعادة الاستخدام تُطبّق على جميع صفحات التطبيق. ضع في اعتبارك أن معظم حالات HoCs يمكن استبدالها بخطافات React. لذا يُرجى استخدام HoCs فقط عند الضرورة للحفاظ على نظافة مكونات الصفحة، وإلا استخدم React Hooks.

الدالة withPrivateRoute(مكون) {
...
إرجاع الدالة PrivateRoute(props) {
إذا (!userConnected) إرجاع ;
إرجاع ;
};
}
دالة withPageProps(المكون) { {
...
إرجاع الدالة PrivateRoute(الخصائص) {
إرجاع ;
};
}
دالة صفحة الملف الشخصي({ التنقل، المسار الحالي، المستخدم الحالي}) { {
إرجاع
صفحة الملف الشخصي
}
تصدير الافتراضي مع مسار خاص(withPrivateRoute(withPageProps(ProfilePage)))

حدود الأخطاء حدود الأخطاء هي مكوّنات صنف، والتي تلتقط جميع الأخطاء/الاستثناءات التي يتم إلقاؤها على مستوى الأبناء. عند الإعلان عنها في المستوى الأعلى ستسمح لك بالقيام بمعالجة الأخطاء بشكل صحيح عن طريق إظهار رسالة خطأ وتسجيل الخطأ في أداة مراقبة النظام الأساسي مثل Sentry. بهذه الطريقة ستكون أول من يكتشف الأخطاء ويحاول إصلاحها قبل أن تؤثر على تجربة المستخدم. ملاحظة: يجب أن تُعلَن ErrorBoundaries في الفئة التي لا تدعم المكونات الوظيفية.

صنف ErrorBoundary يمتد React.Component {
مُنشئ(خواص) {
ممتاز(props);
هذه الحالة = { لديه خطأ: خطأ };
}
ثابت getDerDerDerivedStateFateFromError(خطأ) {
إرجاع { hasError: صحيح };
}
المكوّنDidCatch(خطأ، errorInfo) { {
logErrorToMySentry(خطأ، errorInfo);
}
تصيير() {
إن (كان (this.state.hasError) {
إرجاع
حدث خطأ ما! اتصل بالمسؤول
;
}
إرجاع this.props.children;

}
}