ما هو Hooks وما استخداماته؟
React هي واحدة من أكثر المكتبات شيوعًا المستخدمة في تطوير الويب اليوم. لقد أحدثت ثورة في طريقة بناء تطبيقات الويب، مما يجعلها أسهل وأكثر كفاءة من أي وقت مضى. أحد الأسباب الرئيسية لشعبيتها هو تقديم الخطافات، والتي جعلت من السهل على المطورين إدارة الحالة في تطبيقاتهم.
في هذه المقالة، سنلقي نظرة فاحصة على ماهية الخطافات وكيف يمكن استخدامها في تطبيقات React. سنبدأ بمناقشة مفهوم الحالة في React، قبل الانتقال إلى شرح ماهية الخطافات وكيف تعمل. سنقدم أيضًا أمثلة حول كيفية استخدام الخطافات في أنواع مختلفة من تطبيقات React.
الحالة في React
قبل أن نتمكن من مناقشة الخطافات، نحتاج أولاً إلى فهم مفهوم الحالة في React. في React، تُستخدم الحالة لإدارة البيانات التي يستخدمها أحد المكونات. يمكن أن تكون هذه البيانات أي شيء من سلسلة أو رقم إلى مصفوفة أو كائن. عندما تتغير حالة أحد المكونات، يقوم React تلقائيًا بإعادة عرض المكون ليعكس الحالة الجديدة.
هناك طريقتان لإدارة الحالة في React: استخدام مكونات الفئة واستخدام المكونات الوظيفية. تستخدم مكونات الفئة طريقة خاصة تسمى setState لتحديث حالة المكون، بينما تعتمد المكونات الوظيفية على الخطافات لإدارة الحالة.
ما هي الخطافات؟
تعد الخطافات ميزة جديدة في React تم تقديمها في الإصدار 16.8. وهي تسمح للمطورين باستخدام الحالة وميزات React الأخرى في المكونات الوظيفية. وهذا يعني أنه يمكن للمطورين الآن إنشاء مكونات تستخدم الحالة دون الحاجة إلى استخدام مكونات الفئة.
تأتي الخطافات بأشكال مختلفة، ولكل منها غرض مختلف. الخطافات الأكثر استخدامًا هي useState وuseEffect وuseContext وuseReducer. سنناقش كلًا من هذه الخطافات بمزيد من التفصيل أدناه.
حالة الاستخدام
تُستخدم الخطاف useState لإدارة الحالة في المكونات الوظيفية. تأخذ قيمة أولية كحجة وتعيد مصفوفة تحتوي على الحالة الحالية ووظيفة يمكن استخدامها لتحديث الحالة. فيما يلي مثال لكيفية استخدام useState:
```جافا سكريبت
استيراد React، {useState} من "react"؛
دالة مثال() {
ثابت [العدد، مجموعة العدد] {{0}} useState(0);
يعود (
لقد قمت بالنقر على {count} مرة
);
}
```
في هذا المثال، نستخدم useState لإدارة حالة العداد. يتم تعيين القيمة الأولية للعداد إلى 0 باستخدام useState. ثم نستخدم setCount لتحديث قيمة العداد في كل مرة يتم فيها النقر فوق الزر.
استخدم التأثير
يتم استخدام الخطاف useEffect لأداء التأثيرات الجانبية في المكونات الوظيفية. التأثيرات الجانبية هي أي إجراءات يتم تنفيذها خارج المكون، مثل جلب البيانات من واجهة برمجة التطبيقات أو تحديث عنوان الصفحة.
يأخذ الخطاف useEffect وسيطتين: دالة تقوم بتنفيذ التأثير الجانبي ومجموعة من التبعيات. يتم استدعاء الدالة في كل مرة يتم فيها عرض المكون ويتم استخدام التبعيات لتحديد متى يجب استدعاء الدالة. فيما يلي مثال لكيفية استخدام useEffect:
```جافا سكريبت
استيراد React، { useState، useEffect } من "react"؛
دالة مثال() {
ثابت [العدد، مجموعة العدد] {{0}} useState(0);
useEffect(() => {
document.title=`لقد قمت بالنقر فوق ${count} مرة`;
}، [عدد])؛
يعود (
لقد قمت بالنقر على {count} مرة
);
}
```
في هذا المثال، نستخدم useEffect لتحديث عنوان الصفحة في كل مرة يتم فيها تحديث العداد. نمرر مصفوفة تحتوي على متغير count إلى useEffect، والذي يخبر React باستدعاء الدالة فقط عند تغير count.
استخدم السياق
يتم استخدام خطاف useContext للوصول إلى البيانات المخزنة في موفر السياق. السياق هو وسيلة لمشاركة البيانات بين المكونات دون تمريرها عبر الدعائم.
لاستخدام useContext، نحتاج أولاً إلى إنشاء موفر سياق باستخدام دالة createContext. يمكننا بعد ذلك استخدام useContext للوصول إلى البيانات المخزنة في الموفر. فيما يلي مثال لكيفية استخدام useContext:
```جافا سكريبت
استيراد React، { useState، useContext } من "react"؛
ثابت ThemeContext=React.createContext("light");
دالة مثال() {
ثابت [موضوع، تعيين الموضوع]=useState("light");
يعود (
);
}
دالة شريط الأدوات() {
موضوع ثابت=useContext(ThemeContext);
يعود (
الموضوع الحالي هو: {theme}
);
}
```
في هذا المثال، نستخدم useContext للوصول إلى متغير السمة المخزن في موفر ThemeContext. يمكننا تحديث متغير السمة بالنقر فوق الزر في مكون المثال.
استخدم المخفض
تُستخدم الخطاف useReducer لإدارة الحالة المعقدة في المكونات الوظيفية. وهي تشبه الخطاف useState، ولكن بدلاً من تحديث الحالة مباشرةً، تستخدم دالة Reducer لتحديث الحالة.
تأخذ دالة التخفيض وسيطتين: الحالة الحالية وكائن إجراء. وتعيد حالة جديدة بناءً على الإجراء الذي تم تنفيذه. تأخذ هوك useReducer دالة التخفيض والحالة الأولية كوسيطتين، وتعيد مصفوفة تحتوي على الحالة الحالية ودالة إرسال يمكن استخدامها لأداء الإجراءات. فيما يلي مثال لكيفية استخدام useReducer:
```جافا سكريبت
استيراد React، { useReducer } من "react"؛
مُخفِض الوظيفة (الحالة، الإجراء) {
التبديل (نوع الإجراء) {
حالة "الزيادة":
العودة { count: state.count + 1 };
حالة "التناقص":
العودة { count: state.count - 1 };
تقصير:
رمي خطأ جديد();
}
}
دالة مثال() {
ثابت [حالة، إرسال] {{0}} useReducer(reducer، { count: 0 });
يعود (
لقد قمت بالنقر على {state.count} مرة
);
}
```
في هذا المثال، نستخدم useReducer لإدارة حالة العداد. نمرر دالة مخفّضة تقوم بتحديث متغير count بناءً على الإجراء الذي تم تنفيذه. ثم نستخدم دالة dispatch لتنفيذ الإجراءات.
خاتمة
لقد جعلت الخطافات إدارة الحالة في تطبيقات React أسهل من أي وقت مضى. فهي تسمح لنا بإنشاء مكونات وظيفية يمكنها استخدام الحالة وميزات React الأخرى، دون الحاجة إلى استخدام مكونات الفئة. في هذه المقالة، ناقشنا الخطافات الأكثر استخدامًا في React: useState وuseEffect وuseContext وuseReducer. كما قدمنا أمثلة لكيفية استخدام هذه الخطافات في أنواع مختلفة من تطبيقات React.
من خلال فهم كيفية عمل الخطافات وكيفية استخدامها، يمكنك كتابة أكواد أكثر كفاءة وقابلية للصيانة في تطبيقات React الخاصة بك. إذا لم تكن قد فعلت ذلك بالفعل، فنحن نشجعك على البدء في استخدام الخطافات في مشاريعك الخاصة وتجربة الفوائد التي تجلبها لسير عمل التطوير الخاص بك.