مرجع Hooks
تُعَدّ الـ Hooks في ريآكت (React) من أهم الابتكارات التي غيّرت طريقة كتابة المكونات وإدارة الحالة ودورة الحياة داخل التطبيقات الحديثة. قبل ظهورها، كانت إدارة الحالة ومتابعة دورة حياة المكونات تتطلب استخدام المكونات الصفّية (Class Components)، لكن مع تقديم الـ Hooks في الإصدار 16.8 من ريآكت، أصبح بالإمكان التعامل مع الحالة والخصائص ودورة الحياة داخل المكونات الوظيفية (Functional Components) بطريقة أبسط وأكثر مرونة.
تُستخدم الـ Hooks لإعادة استخدام منطق المكونات (Component Logic) بدون الحاجة إلى هياكل معقدة أو مكونات عليا (HOC). فهي تمكّنك من كتابة مكونات قابلة لإعادة الاستخدام، وصيانة أسهل، وأداء أكثر كفاءة. ضمن تطبيقات الويب الحديثة وواجهات المستخدم التفاعلية (SPAs)، تعتبر الـ Hooks وسيلة أساسية لإدارة الحالة المحلية (useState) والتأثيرات الجانبية (useEffect) والتعامل مع السياق (useContext) وإدارة المراجع (useRef) وغير ذلك.
من خلال هذا المرجع، سيتعرف المطوّر على كيفية استخدام جميع أنواع الـ Hooks المتاحة في ريآكت، سواء الأساسية منها أو المخصّصة (Custom Hooks)، وكيفية دمجها مع مفاهيم إدارة البيانات وتدفقها (Data Flow) ودورة حياة المكونات (Lifecycle) لتحقيق تطبيقات مرنة وسريعة الاستجابة.
مثال أساسي
jsximport React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `عدد النقرات: ${count}`;
return () => {
document.title = 'تم إعادة التعيين';
};
}, [count]);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}> <h2>عداد بسيط باستخدام Hooks</h2> <p>القيمة الحالية: {count}</p>
<button onClick={() => setCount(count + 1)}>زيادة</button>
<button onClick={() => setCount(0)}>إعادة التعيين</button> </div>
);
}
export default Counter;في هذا المثال، نرى تطبيقًا عمليًا بسيطًا لاستخدام الـ Hooks في مكون وظيفي في ريآكت. تم استخدام دالتين رئيسيتين هما useState وuseEffect، وهما من أكثر الـ Hooks شيوعًا. يقوم useState بتهيئة حالة المكون بقيمة ابتدائية (0) ويُرجع دالة لتحديثها. يُستخدم useEffect لإدارة التأثيرات الجانبية مثل تحديث عنوان الصفحة في المستعرض.
عند تحديث قيمة count عبر setCount، يُعاد تنفيذ useEffect تلقائيًا لأن count ضمن مصفوفة التبعيات. كما تمت إضافة دالة تنظيف داخل useEffect تُعيد عنوان الصفحة إلى حالته الافتراضية عند إزالة المكون.
يوضح هذا الكود كيفية تحقيق إدارة الحالة وتحديث واجهة المستخدم بطريقة تفاعلية دون الحاجة لاستخدام مكونات صفية. كما يُظهر قوة مفهوم Hooks في فصل منطق الحالة عن العرض (UI Logic Separation)، مما يجعل الكود أكثر وضوحًا وقابلية لإعادة الاستخدام. في التطبيقات الحقيقية، يُمكن توسيع هذا المثال للتعامل مع بيانات من واجهة API أو حالات متعددة باستخدام نفس النمط.
مثال عملي
jsximport React, { useState, useEffect } from 'react';
function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch('[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)');
const data = await response.json();
setUsers(data);
} catch (error) {
console.error('حدث خطأ أثناء تحميل البيانات:', error);
} finally {
setLoading(false);
}
}
fetchData();
}, []);
if (loading) return <p>جارٍ التحميل...</p>;
return ( <ul>
{users.map(user => ( <li key={user.id}>{user.name}</li>
))} </ul>
);
}
export default UsersList;Advanced ريآكت (React) Implementation
jsximport React, { useState, useEffect, useCallback, useMemo } from 'react';
function SearchableUserList() {
const [users, setUsers] = useState([]);
const [query, setQuery] = useState('');
useEffect(() => {
fetch('[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)')
.then(res => res.json())
.then(data => setUsers(data));
}, []);
const filteredUsers = useMemo(
() => users.filter(user => user.name.toLowerCase().includes(query.toLowerCase())),
[users, query]
);
const handleChange = useCallback((e) => {
setQuery(e.target.value);
}, []);
return ( <div> <input placeholder="بحث عن مستخدم..." value={query} onChange={handleChange} /> <ul>
{filteredUsers.map(u => ( <li key={u.id}>{u.name}</li>
))} </ul> </div>
);
}
export default SearchableUserList;أفضل الممارسات في ريآكت (React) عند استخدام الـ Hooks تتضمن كتابة مكونات صغيرة وواضحة، واستخدام useMemo وuseCallback لتجنّب إعادة التصيير غير الضرورية، وتنظيم الحالة بشكل منطقي بين المكونات. من الأخطاء الشائعة التي يجب تجنبها: تمرير خصائص كثيرة جدًا (prop drilling)، أو تعديل الحالة مباشرة دون استخدام setState، أو كتابة useEffect بدون تحديد تبعيات صحيحة.
لتصحيح الأخطاء، يُوصى باستخدام React DevTools لمراقبة أداء المكونات وتتبع إعادة التصيير. كما يمكن تحسين الأداء عبر تقسيم المكونات الثقيلة واستخدام Lazy Loading أو Suspense.
من ناحية الأمان، يجب دائمًا التعامل بحذر مع البيانات القادمة من الشبكة وتجنّب تشغيل أكواد خارجية داخل useEffect.
بهذه الممارسات، تصبح تطبيقات ريآكت أكثر سرعة واستقرارًا، مع قابلية صيانة وتوسع عالية، خاصة في المشاريع الكبيرة التي تعتمد على البنية المكونية وإدارة الحالة المتقدمة باستخدام Hooks.
📊 المرجع الشامل
| ريآكت (React) Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| useState | إدارة الحالة داخل المكونات | const [state, setState] = useState(initialValue) | useState(0) | Hook أساسي |
| useEffect | تنفيذ التأثيرات الجانبية | useEffect(callback, deps) | useEffect(() => {...}, []) | بديل لـ lifecycle methods |
| useContext | الوصول إلى السياق | const value = useContext(MyContext) | useContext(ThemeContext) | يمنع prop drilling |
| useRef | الوصول إلى عناصر DOM | const ref = useRef(initialValue) | ref.current.focus() | لا يسبب إعادة تصيير |
| useMemo | تحسين الأداء بالتخزين المؤقت | useMemo(() => compute, [deps]) | useMemo(() => value * 2, [value]) | يمنع العمليات المكلفة المتكررة |
| useCallback | تخزين الدوال لمنع إعادة الإنشاء | useCallback(fn, deps) | useCallback(() => setCount(c+1), [c]) | مفيد في المكونات الممررة كمراجع |
| useReducer | إدارة الحالة المعقدة | const [state, dispatch] = useReducer(reducer, initialState) | useReducer(reducer, init) | بديل قوي لـ useState |
| useLayoutEffect | مشابه لـ useEffect لكن ينفذ قبل الرسم | useLayoutEffect(() => {...}) | useLayoutEffect(() => setX(0), []) | لضبط الـ DOM بدقة |
| useImperativeHandle | تخصيص واجهة المرجع للمكونات الأب | useImperativeHandle(ref, () => ({...})) | forwardRef usage | لإنشاء واجهات تفاعلية خاصة |
| useDebugValue | عرض القيم في DevTools | useDebugValue(value) | useDebugValue('loading') | للتصحيح فقط |
| useId | إنشاء معرفات فريدة | const id = useId() | <input id={id} /> | مفيد للنماذج |
| useSyncExternalStore | مزامنة الحالة مع مصادر خارجية | useSyncExternalStore(subscribe, getSnapshot) | للتكامل مع مكتبات خارجية | لـ React 18+ |
| useTransition | إدارة التحميلات التدريجية | const [isPending, startTransition] = useTransition() | startTransition(() => setData()) | يحسن تجربة المستخدم |
| useDeferredValue | تأجيل القيمة | const deferred = useDeferredValue(value) | useDeferredValue(input) | لتقليل التأخير في الواجهة |
| useInsertionEffect | إدراج CSS أو تأثيرات قبل DOM | useInsertionEffect(() => {...}) | useInsertionEffect(() => addStyle()) | مخصص لإدخال الأنماط |
📊 Complete ريآكت (React) Properties Reference
| Property | Values | Default | Description | ريآكت (React) Support |
|---|---|---|---|---|
| strictMode | true/false | false | تشغيل الوضع الصارم لتحذيرات التطوير | React 16+ |
| suspense | Component/Loader | null | إظهار محتوى بديل أثناء التحميل | React 16.6+ |
| lazy | Component | — | تحميل مكونات عند الطلب | React 16.6+ |
| children | Node | — | محتوى المكون الداخلي | All versions |
| key | String/Number | — | تعريف فريد للمكونات المكررة | All versions |
| ref | useRef() | — | الوصول إلى DOM أو المكونات | All versions |
| fallback | JSX | null | عرض بديل أثناء التحميل | React 17+ |
| memo | Component | — | تحسين الأداء بتخزين المخرجات | React 16.8+ |
| errorBoundary | Component | — | التعامل مع الأخطاء في الشجرة | React 16+ |
| context | createContext() | — | مشاركة البيانات بين المكونات | All versions |
| forwardRef | Function | — | تمرير المراجع للمكونات الأب | React 16.3+ |
| fragment | <> </> | — | تجميع عناصر بدون عنصر DOM إضافي | React 16.2+ |
في ختام هذا المرجع، يمكن القول إنّ الـ Hooks تمثل جوهر التطوير الحديث في ريآكت. فهي تمكّن المطوّر من بناء مكونات نظيفة وسريعة وتفاعلية دون الحاجة إلى تعقيدات الصفوف القديمة. عند إتقان الـ Hooks، ستتمكن من إدارة الحالة ودورة الحياة وتدفق البيانات بشكل احترافي داخل التطبيقات أحادية الصفحة (SPA).
كخطوة تالية، يُنصح بالتعمق في موضوعات مثل Custom Hooks، Context API، وReact Query لإدارة البيانات على مستوى التطبيق. كما يمكن دراسة أداء React Fiber وكيفية تحسين إعادة التصيير باستخدام useMemo وSuspense.
إنّ إتقان مرجع Hooks يُعدّ أساسًا قويًا لتطوير تطبيقات مرنة وعالية الأداء باستخدام ريآكت.
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى