مقدمة إلى React Hooks

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

هل سمعت عن React Hooks؟

حسنًا ، React Hooks ، وهي ميزة متوفرة في React v16.7.0-alpha ، هي شيء رائع يجب أن تعرفه.

هنا دعابة لـ React Hooks.

في الكود أعلاه ، useStateهو أول خطاف.

الآن دعنا ننتقل إلى المشكلة التي ستحلها Reacts Hooks.

بعد كل شيء ، يتم تقديم كل ميزة جديدة لحل مشكلة ما. فيما يلي قائمة بالأشياء التي يجب على موقع التفاعل الرسمي أن يقولها حول المشكلات التي سيتم حلها.

من الصعب إعادة استخدام المنطق القائم على الحالة بين المكونات

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

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

باستخدام الخطافات ، يمكنك إعادة استخدام المنطق ذي الحالة دون تغيير التسلسل الهرمي للمكونات.

يصبح من الصعب فهم المكونات المعقدة

هناك أوقات ينمو فيها المكون من حالة صغيرة إلى حالة لا يمكن إدارتها من المنطق ذي الحالة.

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

يقوم هذا المنطق بإعداد مستمعين للأحداث مع إجراء التنظيف في componentWillUnmount. يتم تقسيم التعليمات البرمجية ذات الصلة التي تتغير معًا.

الكود غير ذي الصلة الذي يتم دمجه في طريقة واحدة يؤدي إلى حدوث أخطاء وتناقضات.

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

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

باستخدام الخطافات ، يمكن استخدام المزيد من ميزات React دون الحاجة إلى فئات.

لكن كيف تعمل الخطافات حقًا؟

إليك مقتطف الشفرة الذي رأيناه أعلاه:

ارتباط إلى CodeSandbox

استخدام useStateالخطاف الذي نتحدث عنه.

نسميها داخل مكون دالة لإضافة حالة محلية إليها. ستحافظ React على هذه الحالة بين كل إعادة تصيير تحدث. useStateيُرجع زوجًا له قيمة الحالة الحالية ووظيفة تتيح لك تحديث القيمة.

يمكنك استدعاء هذه الوظيفة من معالج الأحداث أو من مكان آخر. إنه مشابه this.setStateلفئة React ، لكنه لا يدمج الحالة القديمة والجديدة تمامًا.

هناك حجة واحدة فقط useStateلذلك هي الحالة الأولية. في هذا المثال الموضح أعلاه ، تكون الحالة الأولية 0لأن العداد يبدأ من الصفر. لاحظ أنه على عكس this.stateالحالة هنا ليس بالضرورة أن تكون كائنًا - ومع ذلك يمكن أن تكون كائنًا إذا أردت.

إعلان متغيرات الحالة المتعددة

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

ملاحظة: الخطافات هي وظائف تتيح لك "ربط" حالة التفاعل وميزات دورة الحياة من مكونات الوظيفة. لا تعمل الخطافات داخل أصناف React - فهي تتيح لك استخدام React بدون فئات.

تأثير هوك

بالعمل مع React ، ربما تكون قد عملت بالفعل على جلب البيانات أو الاشتراكات أو تغيير DOM يدويًا من مكونات React. نحن نطلق على هذه العمليات اسم "الآثار الجانبية" (أو "الآثار" باختصار).

useEffectيضيف خطاف التأثير ، القدرة على أداء الآثار الجانبية من مكون الوظيفة. لها نفس الغرض مثل componentDidMount، componentDidUpdateوفي componentWillUnmountفئات React ، ولكنها موحدة في واجهة برمجة تطبيقات واحدة.

على سبيل المثال ، يحدد المكون أدناه عنوان المستند بعد أن تقوم React بتحديث DOM:

ارتباط إلى CodeSandbox

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

قواعد هوكس

الخطافات هي وظائف JavaScript ، لكن لها قاعدتان إضافيتان:

  • فقط قم باستدعاء الخطافات في المستوى الأعلى . لا تحاول استدعاء الخطافات داخل الحلقات أو الشروط أو الوظائف المتداخلة.
  • فقط قم باستدعاء الخطافات من مكونات دالة React . لا تحاول استدعاء الخطافات من وظائف JavaScript العادية.

حسنًا ، هذه نظرة سريعة على React Hooks. لمزيد من الوصف التفصيلي ، اتبع هذا الرابط أدناه:

لمحة سريعة عن الخطافات - تفاعل

مكتبة جافا سكريبت لبناء واجهات المستخدم التفاعلية

تعلم سعيد! ؟ ؟