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

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

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

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

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

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

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

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

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

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

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

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

تسمح المراجع للمكون بحمل بعض المعلومات التي لا تُستخدم للعرض ، مثل عنصر DOM أو معرّف المهلة (timeout 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]);
  // ...

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

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

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

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

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

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

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

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

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

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

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

خطاطيف المصدر

يستطيع المكون الوصول للمصادر دون امتلاكها كجزء من حالتهم. على سبيل المثال، يمكن للمكون قراء رسالة من وعد (Promise) أو قراءة معلومات التصميم من السياق (Context).

لقراءة معلومة من مصدر استخدم هذا الخطاف:

• use يسمح لك بقراء معلومة من مصدر مثل Promise أو context.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

خطاطيف أخرى

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

• useDebugValue يتيح لك تخصيص التسمية التي تعرضها أدوات مطوري React لخطافك المخصص.
• useId يتيح للمكون ربط معرف فريد بنفسه (unique ID). تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
• useSyncExternalStore يتيح للمكون الاشتراك في مُوَزّع خارجي.

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

يمكنك أيضًا تعريف الخطاطيف المخصصة الخاصة بك كدوال JavaScript.