رد الفعل هوكس
تمت إضافة الخطافات إلى React في الإصدار 16.8.
تسمح الخطافات لمكونات الوظيفة بالوصول إلى الحالة وميزات React الأخرى. وبسبب هذا ، لم تعد هناك حاجة لمكونات الفصل بشكل عام.
على الرغم من أن الخطافات تحل بشكل عام محل مكونات الصنف ، إلا أنه لا توجد خطط لإزالة الأصناف من React.
ما هو الخطاف؟
تسمح لنا الخطافات بـ "ربط" ميزات React مثل توابع الحالة ودورة الحياة.
مثال:
هنا مثال على الخطاف. لا تقلق إذا لم يكن ذلك منطقيًا. سوف ندخل في مزيد من التفاصيل في القسم التالي .
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
يجب أن يكون importهوكس من react.
نحن هنا نستخدم useStateالخطاف لتتبع حالة التطبيق.
تشير الحالة عمومًا إلى بيانات التطبيق أو الخصائص التي يجب تتبعها.
قواعد الخطاف
هناك 3 قواعد للخطافات:
- لا يمكن استدعاء الخطافات إلا داخل مكونات دالة React.
- لا يمكن استدعاء الخطافات إلا في المستوى العلوي للمكون.
- لا يمكن أن تكون الخطافات مشروطة
ملاحظة: الخطافات لن تعمل في مكونات فئة React.
خطاف مخصص
إذا كان لديك منطق مفصل بالحالة يحتاج إلى إعادة استخدامه في عدة مكونات ، فيمكنك إنشاء الخطافات المخصصة الخاصة بك.
سنناقش المزيد من التفاصيل في قسم الخطافات المخصصة .