رد فعل useRefهوك

يسمح useRefلك الخطاف باستمرار القيم بين عمليات العرض.

يمكن استخدامه لتخزين قيمة قابلة للتغيير لا تتسبب في إعادة تصيير عند التحديث.

يمكن استخدامه للوصول إلى عنصر DOM مباشرة.

لا يسبب إعادة تصيير

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

لتجنب هذا ، يمكننا استخدام useRefالخطاف.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()إرجاع عنصر واحد فقط. تقوم بإرجاع كائن يسمى current.

عند التهيئة useRef، نقوم بتعيين القيمة الأولية useRef(0):.

قم بتشغيل هذا على جهاز الكمبيوتر الخاص بك وحاول الكتابة في الإدخال لرؤية زيادة عدد عرض التطبيق.

الوصول إلى عناصر DOM

بشكل عام ، نريد السماح لـ React بمعالجة جميع عمليات التلاعب في DOM.

ولكن هناك بعض الحالات التي useRefيمكن استخدامها دون التسبب في حدوث مشكلات.

في React ، يمكننا إضافة refسمة إلى عنصر للوصول إليه مباشرةً في DOM.

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

تتبع التغييرات الدولة

يمكن useRefأيضًا استخدام الخطاف لتتبع قيم الحالة السابقة.

هذا لأننا قادرون على الحفاظ على useRefالقيم بين العروض.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

هذه المرة نستخدم مزيجًا من useStateو useEffect، useRefولتتبع الحالة السابقة.

في ال useEffect، نقوم بتحديث useRefالقيمة الحالية في كل مرة inputValueيتم فيها تحديثها عن طريق إدخال نص في حقل الإدخال.