خطافات مدمجة في React

خطافات الحالة (State)

تسمح الحالة للمكون “بتذكر” معلومات مثل مدخلات المستخدم. على سبيل المثال، يمكن لمكوّن النموذج Form استخدام الحالة لتخزين قيمة الإدخال، بينما يمكن لمكون معرض الصور استخدام الحالة لتخزين رقم الصورة المختارة.

لإضافة حالة إلى مكون، استخدم أحد هذه الخطافات:

• useState يعيّن متغير .حالة يمكنك تحديثه مباشرة

• useReducer يعيّن متغير حالة مع منطق التحديث داخل دالة reducer.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

خطافات السياق (Context)

يسمح السياق للمكون بتلقي المعلومات من الآباء البعيدين دون تمريرها كدعامات (props). على سبيل المثال، يمكن لمكوِّن المستوى الأعلى لتطبيقك أن يمرر سمة واجهة المستخدم الحالية إلى جميع المكونات أدناه، بغض النظر عن مدى عمقها.

• useContext يقرأ ويحدّث في السياق.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

خطافات المرجع

تسمح المراجع للمكون بحمل بعض المعلومات التي لا تُستخدم للعرض ، مثل عنصر DOM أو معرّف (ID) المهلة. على عكس الحالة ، لا يؤدي تحديث المرجع إلى إعادة تصيير المكون الخاص بك. المرجع Ref هي “فتحة هروب” من طريقة React. تكون مفيدة عندما تحتاج إلى العمل مع أنظمة غير React، مثل واجهات برمجة تطبيقات المتصفح المضمنة (BOM).

• useRef يعيّن المرجع، يمكنك الاحتفاظ بأي قيمة فيه، ولكن غالبًا ما يتم استخدامه لاحتواء عنصر DOM
• useImperativeHandle يتيح لك تخصيص المرجع الذي يعرضه المكون الخاص بك. نادرًا ما يُستخدم هذا الخطاف.

function Form() {
  const inputRef = useRef(null);
  // ...

خطافات التأثير (Effect)

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

• useEffect يربط مكونًا بنظام خارجي.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

التأثيرات Effect هي “فتحة هروب” من نموذج React. لا تستخدم التأثيرات Effect لتنظيم تدفق البيانات لتطبيقك. إذا كنت لا تتفاعل مع نظام خارجي ، فقد لا تحتاج إلى تأثير.

هناك نوعان نادران من أشكال الاستخدام لل التأثير useEffect مع اختلافات في توقيت الاستخدام:

• useLayoutEffect ينطلق قبل أن يعيد المتصفح اظهار الشاشة. يمكنك قياس التخطيط هنا.
• useInsertionEffect ينطلق قبل أن تُجري React تغييرات على DOM. يمكن للمكتبات إدراج CSS الديناميكي هنا.

خطاطيف الأداء

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

لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطافات:

• useMemo يتيح لك تخزين نتيجة عملية حسابية مكلفة .
• useCallback يتيح لك تخزين تعريف وظيفة function قبل تمريره إلى مكون محسن.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

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

لتحديد أولوية العرض ، استخدم أحد هذه الخطافات:

• useTransition يتيح لك انتقال الحالة إلى غير المحظور والسماح للتحديثات الأخرى بالتداخل معها.
• useDeferredValue يتيح لك تأجيل تحديث جزء غير مهم من واجهة المستخدم والسماح للأجزاء الأخرى بالتحديث أولاً.

خطافات أخرى

هذه الخطافات مفيدة في الغالب لمؤلفي المكتبة ولا يتم استخدامها بشكل شائع في كود التطبيق.

• useDebugValue يتيح لك تخصيص التسمية التي يعرضها React DevTools للخطاف المخصص الخاص بك.
• useId يتيح للمكون ربط معرف فريد بنفسه. تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
• useSyncExternalStore يتيح للمكون الاشتراك في متجر خارجي.

الخطافات الخاصة بك

يمكنك أيضًا تحديد الخطافات المخصصة الخاصة بك كوظائف JavaScript