قلاب useRef() چیست؟ – انجمن DEV

React به‌عنوان یک فریم‌ورک frontend یک مدل برنامه‌نویسی واکنشی را تشویق می‌کند که در آن تغییرات در حالت منجر به رندر مجدد کامپوننت می‌شود. این همان چیزی است که به React اجازه می‌دهد تا به طور موثر رابط کاربری را با تغییرات داده‌های اصلی هماهنگ نگه دارد.

با این حال، سناریوهایی وجود دارد که در آنها ممکن است از شما خواسته شود که مقادیری را ذخیره کرده و به آنها دسترسی داشته باشید که نباید هنگام تغییر، رندرهای مجدد را تحریک کنند. در چنین مواردی است که به قلاب ()useRef نیاز دارید.

قلاب useRef() چیست؟

در این وبلاگ، من به این سوال پاسخ خواهم داد و بینشی در مورد بهترین موارد استفاده و مشکلات رایج هنگام کار با userRef() ارائه خواهم کرد.

معرفی

userRef یک قلاب واکنش است که یک “مقدار اولیه” را به عنوان آرگومان خود می گیرد و یک شی ref قابل تغییر را برمی گرداند که ویژگی فعلی آن به آرگومان ارسال شده مقداردهی اولیه شده است. “مقدار اولیه” می تواند از هر نوع باشد. شی ref برگشتی شبیه یک شیء معمولی جاوا اسکریپت است.

شی ref برای تمام طول عمر کامپوننت باقی می ماند و می توان از آن برای ارجاع مقداری استفاده کرد که برای رندر مورد نیاز نیست. این امکان تداوم مقادیر بین رندرها را فراهم می کند. بنابراین، ref ها برای ذخیره اطلاعاتی که بر خروجی بصری کامپوننت شما تأثیر نمی گذارد، عالی هستند.

اشیاء Ref زمانی مفید هستند که شما نیاز به دسترسی و دستکاری عناصر یا مؤلفه‌های خارج از چرخه عمر مؤلفه معمولی React داشته باشید، مانند فوکوس کردن یک عنصر ورودی، دسترسی به روش‌های مؤلفه یا مدیریت وضعیت در رندرها.

نحو

برای مقداردهی اولیه قلاب useRef، با وارد کردن آن در سطح بالا مانند سایر قلاب‌های واکنشی شروع می‌کنید:

 import { useRef } from 'react';

پس از آن، می توانید از آن در اجزای عملکردی خود استفاده کنید:

const MyComp = () => {    
   //initialize a new ref whose object has the value null 
   const myRef = useRef(null)
   //Change the value of the current property in the myRef object    
   myRef.current="Hello"
}   

در کد بالا، یک شی userRef جدید با مقدار null ایجاد می کنیم و سپس با استفاده از ویژگی فعلی، مقدار آن را به روز می کنیم. لازم به ذکر است که تغییر مقدار این شی ref باعث رندر مجدد نمی شود.

هدف از useRef() چیست؟

1. ایجاد مراجع

یکی از کاربردهای اصلی useRef ایجاد ارجاع به عناصر DOM و همچنین به یک جزء React است. این ارجاعات به شما این امکان را می دهد که با این عناصر یا مؤلفه ها به شیوه ای کنترل شده و اعلامی تعامل داشته باشید و آنها را دستکاری کنید.

بیایید به هر یک نگاهی بیندازیم:

آ. استفاده از useRef() برای ارجاع به عناصر DOM.

این واقعیت که عناصر DOM نیز شی هستند به این معنی است که می توانید با استفاده از useRef به آنها ارجاع دهید. React پشتیبانی داخلی برای این دارد. برای انجام این کار:

• ابتدا تابع useRef را از React وارد کنید و یک ref جدید با مقدار اولیه null ایجاد کنید:

import { useRef } from 'react';

const myComponent = () => {    
  const myRef = useRef(null);    
  //...
}

• سپس، myRef ref را به عنصر DOM مورد نظر، مثلاً در این مورد، ورودی، با اختصاص دادن آن به ویژگی ref در JSX خود متصل می‌کنید.

• با ref در جای خود، می توانید به عنصر ورودی دسترسی داشته باشید و آن را دستکاری کنید و اقداماتی مانند بازیابی ویژگی ها، اندازه گیری ابعاد یا تغییر سبک ها را انجام دهید.

به عنوان مثال، همانطور که در کد سازماندهی بهتر زیر نشان داده شده است، می توانید با فشار دادن یک دکمه، متد ()focus را روی عنصر ورودی فراخوانی کنید:

برخی از موارد استفاده کاربردی که ممکن است ارجاع به DOM با استفاده از useRef مفید باشد عبارتند از:

• استایل پویا: تنظیم سبک ها و کلاس ها بر اساس تعاملات کاربر با دسترسی مستقیم به عناصر DOM ساده می شود.

• اندازه گیری ابعاد: شما می‌توانید ابعاد عناصر را اندازه‌گیری کنید و امکان طراحی واکنش‌گرا و تنظیمات چیدمان را فراهم کنید.

• اعتبارسنجی و بازخورد: ورودی های کاربر را اعتبارسنجی کنید و با تعامل با DOM بازخورد ارائه دهید.

• انیمیشن های روان: بدون زحمت انیمیشن ها و انتقال ها را با تغییر ویژگی های عنصر با استفاده از ref ها فعال کنید.

ب استفاده از useRef() برای ارجاع به اجزای React.

قلاب useRef() راهی برای دسترسی مستقیم و تعامل با کامپوننت React از کامپوننت دیگر فراهم می‌کند (نوعی مانند ارتباط مستقیم‌تر و کامپوننت به کامپوننت).

می‌توانید از آن برای فراخوانی متدها، دسترسی به ویژگی‌ها یا مدیریت وضعیت مؤلفه بدون دخالت والد مؤلفه استفاده کنید.

While it is possible to use the useRef to access a child component’s methods and properties, it is generally not recommended as it goes against the principles of React’s uni-directional data flow. If you need to manage a child component’s state from a parent component, it is recommended you apply props.

useRef زمانی مناسب است که شما نیاز به ارجاع و تعامل با یک نمونه خاص از یک جزء، به ویژه در مدیریت رفتار دارید.

یک سناریوی خوب زمانی است که شما باید یک متد جزء فرزند را از مولفه والد فراخوانی کنید. لوازم جانبی را نمی توان در این مثال استفاده کرد زیرا آنها فقط یک راه کار می کنند، از والدین به فرزند.

برای انجام این کار، شما همچنین به تابع forwardRef در React نیاز دارید که به شما امکان می‌دهد یک ref را از یک مؤلفه والد به یکی از مؤلفه‌های فرزند آن فوروارد کنید. forwardRef به شما این امکان را می دهد که کپسوله سازی را در اجرای مولفه کودک حفظ کنید و در عین حال به مولفه والد اجازه می دهد به آن ارجاع دهد.

در اینجا یک مثال کد است:

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const MyChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    greeting: () => {
      alert("Greetings from the Child component");
    }
  }));

  return (
    
Child component here!!!
  );
});

const App = () => {
  const myRef = useRef();

  const handleClick = () => {
    myRef.current.greeting();
  };

  return (
    

      Click
      
    
  );
}

export default App;

یک تفکیک مختصر:

• ما یک ref myRef تعریف می کنیم که برای ایجاد یک مرجع به مؤلفه فرزند (MyChildComp) در مؤلفه App استفاده می شود.

• MyChildComp یک مؤلفه فرزند است که با تابع forwardRef ایجاد شده است که به آن امکان می دهد یک ویژگی ref را بپذیرد.

• در داخل MyChildComp، ما از قلاب useImperativeHandle برای تعریف یک تابع، تبریک، استفاده می کنیم که می تواند از مولفه والد فراخوانی شود. هدف از این عملکرد نمایش یک هشدار با پیام “Hereetings from the Child” است.

• تابع handleClick نیز تعریف شده است. هنگامی که دکمه “Click” کلیک می شود، myRef.current.greeting() را فراخوانی می کند که به نوبه خود عملکرد تبریک را در مؤلفه فرزند فعال می کند و در نتیجه یک پیام هشدار نمایش داده می شود.

• فرزند MyChildComp نیز متن ساده ای را ارائه می دهد: “جزء فرزند اینجا!!!”

خروجی

2. ماندگاری داده ها از طریق رندرها

useRef همچنین برای ذخیره یک مقدار و تداوم آن در رندرهای یک جزء استفاده می شود. مقادیر در ویژگی فعلی شی useRef ذخیره می شوند.

تغییر این مقادیر باعث رندر مجدد نمی شود. بنابراین، useRef راه مناسبی برای ذخیره مقادیری است که نباید بر رابط کاربری مؤلفه تأثیر بگذارد، اما باید رزرو شوند.

بنابراین استفاده از آن در مواردی مانند هنگام ذخیره داده ها، مدیریت وضعیت قبلی یا اعتبارسنجی ورودی فرم مناسب است.

برای درک بهتر، این یک مثال است:

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

const Previous = () => {
    const previousValue = useRef(null);
    const [value, setValue] = useState('Hello')

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

    return (
    

        
Previous value: {previousValue.current}
        
Current value: {value}
    
    )
}

• یک ref previousValue را مقداردهی اولیه می کنیم و مقدار اولیه آن را null می کنیم. ما همچنین یک مقدار متغیر حالت را با استفاده از useState ایجاد می کنیم و آن را با رشته “Hello” مقداردهی اولیه می کنیم.

• در useEffect، هر زمان که متغیر value state تغییر کرد، previousValue.current را با مقدار فعلی آن به روز می کنید. این توضیح می دهد که چرا ما آن را به عنوان یک وابستگی در useEffect تنظیم کرده ایم.

• UI هم مقدار قبلی و هم مقدار فعلی را نمایش می دهد. هنگامی که وضعیت مقدار تغییر می کند، useEffect previousValue.current را به روز می کند و به شما امکان می دهد هر دو مقدار قبلی و فعلی را در رابط کاربری نمایش دهید.

مشکلات رایج هنگام استفاده از قلاب useRef.

قلاب ()useRef همانطور که در بالا توضیح داده شد یک قلاب مفید است، اما همچنین دارای برخی مشکلات احتمالی است که باید از آنها آگاه باشید.

برخی از آنها عبارتند از:

• عدم ایجاد رندر مجدد: بر خلاف useState، useRef هنگامی که مقدار آن تغییر می کند باعث رندر مجدد نمی شود. این می‌تواند به دلایل عملکرد مفید باشد، اما در صورتی که برای رندر کردن به ارزش مجدد متکی باشید، می‌تواند منجر به UI قدیمی یا ناسازگار شود. برای جلوگیری از این امر، همیشه باید از useState یا useEffect برای به روز رسانی UI در زمانی که مقدار ref تغییر می کند استفاده کنید.

• عدم استفاده از آن برای دستکاری DOM: useRef اغلب با دستکاری DOM همانطور که قبلا نشان داده شد، دقیقاً هنگام ارجاع به عناصر DOM مرتبط است. با این حال، مهم است که اطمینان حاصل کنید که از آن به درستی استفاده می کنید و DOM را مستقیماً خارج از DOM مجازی React تغییر نمی دهید.

• استفاده از refs برای حالت مشتق شده: Refها برای ذخیره مقادیری هستند که مستقیماً با وضعیت رابط کاربری مرتبط نیستند، مانند گره‌های DOM، تایمرها یا اشتراک‌ها. با این حال، گاهی اوقات ممکن است وسوسه شوید که از refs برای مقادیری که از props یا حالت مشتق شده‌اند، مانند مقادیر محاسبه شده یا مقادیر قبلی استفاده کنید. این می‌تواند منجر به باگ و سردرگمی شود، زیرا داوران در جریان داده‌های React شرکت نمی‌کنند و به‌طور خودکار هنگام تغییر props یا وضعیت به‌روزرسانی نمی‌شوند. برای جلوگیری از این امر، باید از useMemo یا usePrevious hooks به جای refs برای حالت مشتق شده استفاده کنید.

• استفاده از refs برای ضد الگوها: از Refs همچنین می توان برای ضد الگوهایی استفاده کرد که اصول React برنامه نویسی اعلانی و جریان داده های یک طرفه را نقض می کنند. برای مثال، می‌توانید از refs برای ذخیره متغیرهای سراسری، دستکاری props یا state به طور مستقیم یا فراخوانی روش‌های مؤلفه فرزند به طور ضروری استفاده کنید. این روش‌ها می‌توانند درک، آزمایش و نگهداری کد شما را سخت‌تر کنند. برای جلوگیری از این امر، باید بهترین شیوه های React را دنبال کنید و از قلاب هایی مانند useContext، useReducer یا قلاب های سفارشی به جای refs برای این سناریوها استفاده کنید.

نتیجه

userRef همانطور که در این وبلاگ مشاهده می شود برای زمانی که شما نیاز به حفظ مقادیر در رندرها و همچنین زمانی که نیاز به ایجاد ارجاع دارید مناسب است.

این یک قلاب React نسبتاً عجیب است که برای استفاده مؤثر، شما به عنوان برنامه نویس باید به طور کامل درک کنید که چه زمانی و کجا از آن برای بهترین نتیجه در برنامه خود استفاده کنید و در عین حال اصول برنامه نویسی مورد انتظار React را برای جلوگیری از دام ها در نظر داشته باشید. حوادث😞).

امیدوارم این وبلاگ به ایجاد این درک کمک کند. کد نویسی مبارک!