مراجع React: إزالة الغموض عن useRef مقابل createRef

في عالم تطوير React الديناميكي، تعد إدارة حالة المكونات والتفاعل مع نموذج كائن المستند (DOM) بكفاءة أمرًا بالغ الأهمية. توفر مراجع React (Refs) آلية للوصول إلى عناصر DOM أو مكونات React ومعالجتها مباشرة. الطريقتان الأساسيتان لإنشاء المراجع هما useRef و createRef. على الرغم من أن كليهما يخدم غرض إنشاء المراجع، إلا أنهما يختلفان في تنفيذهما وحالات استخدامهما. يهدف هذا الدليل إلى إزالة الغموض عن هذين النهجين، مما يوفر الوضوح حول متى وكيفية الاستفادة من كل منهما بفعالية في مشاريع React الخاصة بك، خاصة عند التطوير لجمهور عالمي.

فهم مراجع React

المرجع (Ref)، وهو اختصار لـ reference، هو ميزة في React تتيح لك الوصول إلى عقدة DOM أو مكون React مباشرة. هذا مفيد بشكل خاص عندما تحتاج إلى:

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

بينما تشجع React على النهج التعريفي، حيث تتم إدارة واجهة المستخدم من خلال الحالة (state) والخصائص (props)، هناك مواقف يكون فيها التلاعب المباشر ضروريًا. توفر المراجع طريقة لسد الفجوة بين طبيعة React التعريفية وعمليات DOM الحتمية.

createRef: نهج مكونات الفئة

createRef هي طريقة توفرها React. تُستخدم بشكل أساسي داخل مكونات الفئة (class components) لإنشاء المراجع. في كل مرة يتم فيها إنشاء مثيل لمكون فئة، تقوم createRef بإنشاء كائن مرجعي جديد. هذا يضمن أن كل مثيل للمكون له مرجع فريد خاص به.

الصيغة والاستخدام

لاستخدام createRef، تقوم أولاً بالإعلان عن مرجع في مكون الفئة الخاص بك، عادةً في المُنشئ (constructor). بعد ذلك، تقوم بإرفاق المرجع بعنصر DOM أو مكون باستخدام السمة ref.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // الوصول إلى عنصر DOM بعد تحميل المكون
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

في هذا المثال، يتم إنشاء this.myRef باستخدام React.createRef(). ثم يتم تعيينه إلى السمة ref لعنصر الإدخال. بعد تحميل المكون (في componentDidMount)، يمكنك الوصول إلى عقدة DOM الفعلية باستخدام this.myRef.current وإجراء عمليات عليها (في هذه الحالة، تركيز الإدخال).

مثال: التركيز على حقل إدخال

دعنا نفكر في سيناريو تريد فيه التركيز على حقل إدخال تلقائيًا عند تحميل المكون. هذه حالة استخدام شائعة للمراجع، خاصة في النماذج أو العناصر التفاعلية.

class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

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

اعتبارات هامة مع createRef

• مكونات الفئة فقط: تم تصميم createRef للاستخدام في مكونات الفئة. بينما قد تعمل تقنيًا في المكونات الوظيفية، إلا أنه ليس الاستخدام المقصود ويمكن أن يؤدي إلى سلوك غير متوقع.
• مرجع جديد في كل مثيل: يحصل كل مثيل لمكون الفئة على createRef الخاص به. هذا مهم للحفاظ على العزل بين مثيلات المكون.

useRef: خطاف المكونات الوظيفية

useRef هو خطاف (Hook) تم تقديمه في React 16.8. يوفر طريقة لإنشاء كائنات مرجعية قابلة للتغيير داخل المكونات الوظيفية (functional components). على عكس createRef، يعيد useRef نفس كائن المرجع في كل مرة يتم فيها عرض المكون. هذا يجعله مثاليًا للحفاظ على القيم عبر عمليات العرض دون التسبب في إعادة العرض.

الصيغة والاستخدام

استخدام useRef بسيط. تستدعي خطاف useRef، وتمرر قيمة أولية. يعيد الخطاف كائنًا بخاصية .current، والتي يمكنك بعد ذلك استخدامها للوصول إلى القيمة وتعديلها.

import React, { useRef, useEffect } from 'react';

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // الوصول إلى عنصر DOM بعد تحميل المكون
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

في هذا المثال، ينشئ useRef(null) مرجعًا بقيمة أولية null. يتم استخدام خطاف useEffect للوصول إلى عنصر DOM بعد تحميل المكون. تحتوي خاصية myRef.current على المرجع إلى عنصر الإدخال، مما يتيح لك التركيز عليه.

مثال: تتبع قيم الخصائص السابقة

أحد حالات الاستخدام القوية لـ useRef هو تتبع القيمة السابقة لخاصية (prop). نظرًا لأن التغييرات في المراجع لا تؤدي إلى إعادة العرض، يمكنك استخدامها لتخزين القيم التي تريد الاحتفاظ بها عبر عمليات العرض دون التأثير على واجهة المستخدم.

import React, { useRef, useEffect } from 'react';

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
القيمة الحالية: {value}
      
القيمة السابقة: {previousValue.current}
    
  );
}

في هذا المثال، تقوم previousValue.current بتخزين القيمة السابقة للخاصية value. يقوم خطاف useEffect بتحديث المرجع كلما تغيرت الخاصية value. يتيح لك هذا مقارنة القيم الحالية والسابقة، والتي يمكن أن تكون مفيدة لاكتشاف التغييرات أو تنفيذ الرسوم المتحركة.

اعتبارات هامة مع useRef

• المكونات الوظيفية فقط: useRef هو خطاف ولا يمكن استخدامه إلا داخل المكونات الوظيفية أو الخطافات المخصصة.
• يستمر عبر عمليات العرض: يعيد خطاف useRef نفس كائن المرجع في كل عملية عرض. هذا هو مفتاح قدرته على الاحتفاظ بالقيم دون التسبب في إعادة العرض.
• خاصية .current قابلة للتغيير: يمكنك تعديل خاصية .current لكائن المرجع مباشرة.
• قيمة أولية: يمكنك توفير قيمة أولية لـ useRef. سيتم تعيين هذه القيمة إلى خاصية .current عند عرض المكون لأول مرة.
• لا إعادة عرض: تعديل خاصية .current للمرجع لا يسبب إعادة عرض للمكون.

useRef مقابل createRef: مقارنة تفصيلية

الآن بعد أن استكشفنا كلاً من useRef و createRef بشكل فردي، دعنا نقارنهما جنبًا إلى جنب لتسليط الضوء على اختلافاتهما الرئيسية ومتى تختار أحدهما على الآخر.

الميزة	useRef	createRef
نوع المكون	المكونات الوظيفية	مكونات الفئة
خطاف أم طريقة	خطاف (Hook)	طريقة (Method)
مثيل المرجع	يعيد نفس كائن المرجع في كل عملية عرض	ينشئ كائن مرجع جديدًا في كل مثيل للمكون
حالات الاستخدام	الوصول إلى عناصر DOM الاحتفاظ بالقيم عبر عمليات العرض دون التسبب في إعادة العرض تتبع قيم الخصائص السابقة تخزين القيم القابلة للتغيير التي لا تسبب إعادة عرض	الوصول إلى عناصر DOM الوصول إلى أساليب المكونات الفرعية

اختيار المرجع الصحيح: دليل اتخاذ القرار

إليك دليل بسيط لمساعدتك في الاختيار بين useRef و createRef:

• هل تعمل مع مكون وظيفي؟ استخدم useRef.
• هل تعمل مع مكون فئة؟ استخدم createRef.
• هل تحتاج إلى الاحتفاظ بقيمة عبر عمليات العرض دون التسبب في إعادة العرض؟ استخدم useRef.
• هل تحتاج إلى تتبع القيمة السابقة لخاصية ما؟ استخدم useRef.

ما وراء معالجة DOM: حالات استخدام متقدمة للمراجع

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

1. الوصول إلى أساليب المكونات الفرعية

يمكن استخدام المراجع للوصول إلى الأساليب المحددة في المكونات الفرعية. يتيح هذا للمكون الأصل تشغيل الإجراءات أو استرداد البيانات من أبنائه مباشرة. هذا النهج مفيد بشكل خاص عندما تحتاج إلى تحكم دقيق في المكونات الفرعية.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // استدعاء طريقة على المكون الفرعي
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        تشغيل إجراء المكون الفرعي
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('تم تشغيل إجراء المكون الفرعي!');
  };

  render() {
    return 
هذا مكون فرعي.
;
  }
}

في هذا المثال، يستخدم ParentComponent مرجعًا للوصول إلى ChildComponent واستدعاء طريقته doSomething.

2. إدارة التركيز والاختيار

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

import React, { useRef, useEffect } from 'react';

function FocusOnMount() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // تحديد النص في حقل الإدخال
    }
  }, []);

  return ;
}

هذا المثال يركز على حقل الإدخال ويحدد نصه بمجرد تحميل المكون.

3. تحريك العناصر

يمكن استخدام المراجع بالاقتران مع مكتبات الرسوم المتحركة (مثل GreenSock أو Framer Motion) لمعالجة DOM مباشرة وإنشاء رسوم متحركة معقدة. يتيح هذا التحكم الدقيق في تسلسلات الرسوم المتحركة.

مثال باستخدام جافا سكريبت الأصلي للتبسيط:

import React, { useRef, useEffect } from 'react';

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // رسم متحرك بسيط: تحريك الصندوق إلى اليمين
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // ثانية واحدة
          iterations: Infinity, // تكرار إلى الأبد
          direction: 'alternate', // اتجاه متبادل
        }
      );
    }
  }, []);

  return 
;
}

يستخدم هذا المثال واجهة برمجة تطبيقات الويب للرسوم المتحركة (Web Animations API) لتحريك صندوق بسيط، وتحريكه ذهابًا وإيابًا أفقيًا.

أفضل الممارسات لاستخدام مراجع React في التطبيقات العالمية

عند تطوير تطبيقات React لجمهور عالمي، من المهم مراعاة كيفية تفاعل المراجع مع التدويل (i18n) والتعريب (l10n). إليك بعض أفضل الممارسات:

1. إمكانية الوصول (A11y)

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

import React, { useRef, useEffect } from 'react';

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // التركيز فقط إذا لم يكن الزر مركزًا عليه بالفعل من قبل المستخدم
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return انقر هنا;
}

2. حقول الإدخال الدولية

عند العمل مع حقول الإدخال، كن على دراية بأساليب الإدخال المختلفة ومجموعات الأحرف المستخدمة في لغات مختلفة. تأكد من أن معالجاتك المستندة إلى المراجع (مثل التحديد، موضع المؤشر) تعمل بشكل صحيح عبر أنواع الإدخال واللغات المختلفة. اختبر مكوناتك جيدًا بلغات وأساليب إدخال مختلفة.

3. تخطيطات من اليمين إلى اليسار (RTL)

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

4. اعتبارات الأداء

بينما توفر المراجع طريقة قوية للتفاعل مع DOM، فإن الإفراط في استخدامها يمكن أن يؤدي إلى مشكلات في الأداء. يتجاوز التلاعب المباشر بـ DOM عملية DOM الافتراضية والمطابقة في React، مما قد يؤدي إلى عدم تناسق وتحديثات أبطأ. استخدم المراجع بحكمة وعند الضرورة فقط.

الخلاصة

مراجع React، وتحديدًا useRef و createRef، هي أدوات أساسية لمطوري React. يعد فهم الفروق الدقيقة في كل نهج ومتى يتم تطبيقها بفعالية أمرًا بالغ الأهمية لبناء تطبيقات قوية وعالية الأداء. يظل createRef هو المعيار لإدارة المراجع داخل مكونات الفئة، مما يضمن أن كل مثيل له مرجعه الفريد. أما useRef، بطبيعته المستمرة عبر عمليات العرض، فهو مثالي للمكونات الوظيفية، حيث يوفر طريقة لإدارة عناصر DOM والاحتفاظ بالقيم دون إثارة عمليات إعادة عرض غير ضرورية. من خلال الاستفادة من هذه الأدوات بحكمة، يمكنك تحسين وظائف وتجربة المستخدم لتطبيقات React الخاصة بك، وتلبية احتياجات جمهور عالمي بواجهات يمكن الوصول إليها وعالية الأداء.

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