لسوء الحظ، تم التقليل من قيمة useRef. وهي ليست من بين الخطافات الأكثر شعبية، ولكنها مفيدة. معرفة كيفية ومكان استخدامه يمكن أن يحقق نتائج رائعة.

هيا لنبدأ مع الأساسيات

useRef هو خطاف تفاعلي يتيح لك الإشارة إلى قيمة غير مطلوبة للعرض.

ستتذكر React القيمة التي أنشأتها من خلال useRef، سواء كنت تنشئ كائن JavaScript يشير إلى عقدة في DOM أو قيمة بسيطة، ولن يتم فقدها أثناء عمليات إعادة العرض.

ماذا يعطينا؟

1. الوصول إلى عناصر DOM:

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

2. تخزين القيم القابلة للتغيير:

   • يمكنك تذكر أي بيانات تحتاجها دون إعادة عرض المكونات. على سبيل المثال، إذا كنت بحاجة إلى عداد أو مؤقت، فاختر useRef بدلاً من useState.

أمثلة

إليك بعض الأمثلة لتوضيح قوة الاستخدامالمرجع.

مثال 1: الإشارة إلى رقم

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      >
  );
};

export default Counter;

في هذا المثال:

• refCount هو مرجع قابل للتغيير إلى رقم.
• refInputField هو مرجع لعنصر الإدخال.
• عند النقر على الزر، يزداد العداد، ويكتسب حقل الإدخال التركيز.

المثال 2: تتبع القيم السابقة

حالة الاستخدام الشائعة الأخرى لـ useRef هي تتبع القيم السابقة.

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

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

في هذا المثال:

• prevCountRef يتتبع القيمة السابقة للعدد.
• يتم تحديث الخطاف useEffect إلى prevCountRef.current كلما تغير العدد.
• يسمح لك هذا بعرض كل من الأعداد الحالية والسابقة دون إثارة عمليات إعادة عرض غير ضرورية.

النصائح والحيل المتقدمة مع useRef

1. القيم الثابتة عبر العروض

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

مثال: تتبع عدد عرض أحد المكونات.

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

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current  = 1;
  });

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. التكامل مع مكتبات الطرف الثالث

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

مثال: دمج مكتبة الرسوم البيانية.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. تجنب عمليات إعادة العرض غير الضرورية في التطبيقات المعقدة

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

مثال: تخزين كائن حالة قابل للتغيير.

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. تجنب مشكلات الإغلاق

استخدام useRef يمكن أن يساعد في تجنب مشكلات الإغلاق من خلال توفير مرجع ثابت لقيمة تستمر عبر العروض.

مثال: مؤقت مع useRef لتجنب الحالة التي لا معنى لها.

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

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

خاتمة

الخطافات رائعة ويجب عليك استخدامها. يمكنك تحقيق الكثير إذا فهمت كيفية عمل React وقمت بتطبيق الخطافات بشكل صحيح. useRef قوي بشكل خاص لـ:

• الوصول إلى عناصر DOM ومعالجتها.
• تخزين القيم القابلة للتغيير التي لا تؤدي إلى إعادة العرض.
• القيم المستمرة عبر العروض.
• التكامل مع مكتبات الطرف الثالث.
• تجنب عمليات إعادة العرض غير الضرورية في التطبيقات المعقدة.
• التخفيف من مشكلات الإغلاق.

من خلال فهم useRef واستخدامه، يمكنك كتابة مكونات React أكثر كفاءة وفعالية. تكمن القوة الحقيقية للخطافات في فهم سلوكها وتطبيقها بحكمة.

هل تعلم أن useState ليس دائمًا هو الإجابة الصحيحة؟