mehdi saamaani
mehdi saamaani
خواندن ۱ دقیقه·۲ سال پیش

React: فهمیدن Ref()




اصلا مورد استفاده های ref چی هست؟؟ ما برای دسترسی به المنت های HTML از روش های مختلفی استفاده میکنیم مثلا میخوایم به value یک اینپوت دسترسی پیدا کنیم


نوشتن دستورات HTML در REACT این مدل کد نوشتن مانند تصویر بالا کار درستی نیست و سرعت React رو پایین میاره پس چاره چیه وقتی میخوایم به المنت ها دسترسی مستقیم داشته باشیم؟

در کل ()Ref یک راه برای دسترسی به المنت ها بصورت مستقیم هست جایی که بدون استفاده از props میخوایی به مقدار المنت فرزند دسترسی داشته باشی
ساده ترین مثالش اینه وقتی وارد صفحه میشیم روی اینپوت فوکوس بشه یا مثلا وقتی وارد فلان روت شدیم یک باتن اجرا بشه

استفاده بیش از حد Ref ممنوع

نباید برای هرچیزی از Ref استفاده کنی در نظر بگیر برای بازو بسته شدن یک مودال باید برای اون یک isOpen یا isClose ایجاد کنی نه از Ref استفاده کنی

مرحله اول تعریف Ref البته این توی کلاس کامپوننت هست توی Functional هم از هوک ()useRef میتونی استفاده کنی
مرحله اول تعریف Ref البته این توی کلاس کامپوننت هست توی Functional هم از هوک ()useRef میتونی استفاده کنی


مرحله دوم استفاده ای هست که از المنت میخوایی داشته باشی اینجا گفته فوکوس انجام بشه
مرحله دوم استفاده ای هست که از المنت میخوایی داشته باشی اینجا گفته فوکوس انجام بشه


خووووب دقت کن در مرحله سوم 2 تا کار انجام میدی طبق این مثال اول اینکه باید مقدار {something}=ref رو بنویسی که react بفهمه دقیقا توی کدوم المنت قراره به references اون دسترسی پیدا کنی

و دوم اینکه مقدار رو تعریف کنی که بدونه بعد از کلیک references کدوم المنت قراره تغیر کنه

برای خسته کننده نشدن این مقاله قسمت بعد رو اختصاص میدیم به forwardRef



reactکارuseref
شاید از این پست‌ها خوشتان بیاید