Search⌘ K
AI Features

فهم الخطافات في React

تعرف على ما هي الخطافات وكيف تعمل على تمكين الحالة والتأثيرات في المكونات الوظيفية.

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

ما هي الخطافات بالضبط؟

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

Key Hooks in React
Key Hooks in React

دعونا نلقي نظرة على أحد مكونات التحية الوظيفية الأساسية:

Javascript (babel-node)
function Greeting() {
return (
<h1>Hello, welcome to our React application!</h1>
);
}
export default Greeting;

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

قبل ظهور Hooks، كانت المكونات الوظيفية تقتصر على عرض واجهات المستخدم فقط.

كيف تحل هوكس مشكلة انعدام الجنسية

لتقدير قوة الخطافات، فكّر في كيفية تحسين مكون وظيفي بمنحه القدرة على تذكر القيم والاستجابة لتفاعلات المستخدم. على الرغم من أننا لن نتعمق في التفاصيل الآن، إلا أن هذه المعاينة السريعة تُظهر كيف يمكن لمكون وظيفي كان سابقًا "بدون حالة" إدارة بياناته الخاصة والتفاعل مع التغييرات دون تحويله إلى فئة. لنلقِ نظرة على المكون الوظيفي أعلاه الذي يُرحّب بالتحية بعد إدارة حالته باستخدام الخطافات.

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

ملحوظة: سوف نناقشuseState سنتحدث عن الخطافات الأخرى بمزيد من التفصيل في الدروس القادمة. حاليًا، يكفي معرفة أن الخطافات تُمكّن المكونات الوظيفية من إدارة الحالات، وهي قدرات كانت متاحة سابقًا فقط في المكونات القائمة على الفئات.