useDebugValue

useDebugValue(value, format?)

• المرجع
  • useDebugValue(value, format?)
• الاستخدام
  • إضافة تصنيف إلي خطاف مخصص
  • تأجيل التنسيق لقيمة التصحيح (debug value)

المرجع

useDebugValue(value, format?)

قم باستدعاء useDebugValue في المستوى الأعلي من خطافك المخصص لعرض قيمة تصحيح قابلة للقراءة:

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

اطلع على المزيد من الأمثلة بالأسفل.

المعاملات (parameters)

• value: القيمة التي تريد عرضها في أدوات مطور React. يمكن أن تكون من أي نوع.
• اختياري format: دالة تنسيق. عند فحص المكون، ستقوم أدوات المطور باستدعاء دالة التنسيق مع value كمعامل، ثم يتم عرض القيمة التي تم إرجاعها (والتي قد تحتوي على أي نوع). إذا لم تحدد دالة التنسيق، سيتم عرض القيمة الأصلية من المعامل value.

العائدات

useDebugValue لا يعيد أي شيء.

الاستخدام

إضافة تصنيف إلي خطاف مخصص

قم باستدعاء useDebugValue في المستوى الأعلي من خطافك المخصص لعرض قيمة تصحيح قابلة للقرائة في أدوات مطور React.

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

هذا يتيح للمكونات التي تستدعى useOnlineStatus أن تحمل تصنيف مثل OnlineStatus: "Online" عندما تقوم بفحصها:

بدون استدعاء useDebugValue، سيتم عرض البيانات الأساسية فقط دون أي تصنيف (في هذا المثال، true).

تأجيل التنسيق لقيمة التصحيح (debug value)

يمكنك أيضا تمرير دالة تنسيق كمعامل (parameter) ثاني إلي useDebugValue:

useDebugValue(date, date => date.toDateString());

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

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