Refs: Web Development Superchargers

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

‏Ref دقیقه چیه؟

تصور کنید تعداد زیادی بادکنک دارید که هر کدوم با یه نخ به جایی وصل هستن و شما میخواید یکی از اون بادکنکا رو بردارید اما دستتون بهشون نمیرسه! چیکار میکنید؟ نخی که به اون بادکنک وصله رو میگیرید و میکشیدش تا به اون بادکنک دسترسی پیدا کنید.
مشابه همین مثال رو در دنیای وب داریم، شما برای این که به یه element خاص از element های موجود تو صفحه وبتون در زمان اجرا دسترسی داشته باشید، نیاز دارید نخی که به اون element وصله رو مشخص کنید و هر کاری با اون المنت دارید به کمک اون نخ انجام بدید. ref ها نقش نخ رو در مثال بالا بازی میکنن.
هر ref به یه element خاص وصله و شما به کمک اون ref میتونید کارهای مختلفی رو با اون element انجام بدید.

چه کارهایی رو به کمک ref میشه انجام داد؟

چندتا از کارایی که به کمک ref میشه انجام داد رو ببینیم و بررسی کنیم:
۱) دسترسی مستقیم به element های DOM: با استفاده از ref ما میتونیم به element ها دسترسی مستقیم داشته باشیم و کارهایی مثل فوکوس کردن، اسکرول کردن به نقطه ای خاص و یا حتی صدا زدن متدهای اون element رو انجام بدیم.
۲) عملیات‌های مربوط به فرم: ref به ما این امکان رو میده که به ورودی‌های موجود در فرم دسترسی داشته باشیم و حتی اونها رو ویرایش کنیم.
۳) تعامل با پکیج و کتابخونه‌ها: تعداد زیادی از پکیج‌ها و کتابخونه‌هایی که در دنیای وب استفاده میشن برای این که کارشون رو به درستی انجام بدن نیازمند دسترسی به DOM هستن که به کمک ref میتونیم این دسترسی رو بهشون بدیم.
۴) تغییرات ظاهری و انیمیشن‌ها: به کمک ref میتونیم style یه المنت رو عوض کنیم و حتی بهش انمیشن بدیم.
۵) اندازه‌گیری: با استفاده از ref میشه اندازه و مکان و... یه المنت رو به دست آورد که میتونه برای محاسبات و همچنین پیاده‌سازی دیزاین responsive کاربرد داشته باشه.

۶) پیاده‌سازی منطق دستوری: همونطور که احتمالا میدونید، React به برنامه‌نویسی اعلانی (Declarative) تاکید داره، اما ممکنه تو یه نمونه خاص، شما به برنامه‌نویسی دستوری (imperative) نیاز داشته باشید. به کمک ref میتونیم این کار رو انجام بدیم. (اگه علاقه‌مند به بیشتر دونستن درباره این دو الگوی برنامه‌نویسی هستین، توی کامنتای همین مقاله بهم بگین تا تو مقاله یا مقاله‌های بعدیم بهش بپردازم.)
۷) افزایش کارایی (Optimizing performance): ref میتونه با جلوگیری از re-render های اضافه، به افزایش سرعت، کارایی و بهینگی برنامه کمک کنه. اما چطوری؟ با توجه به این که میشه با استفاده از ref به یه المنت خاص دسترسی داشت، پس میشه به جای re-render شدن کل صفحه یه المنت خاص رو آپدیت کرد.
۸) Focus & Interactions: یکی دیگه از کارایی‌های ref، اینه که به ما این اجازه رو میده که Focus کاربر رو مدیریت کنیم، مثلا کاربر رو به یه ورودی خاص هدایت کنیم و یا داخل یه tab-view به یه tab خاص بریم.

این موارد فقط بخشی از کارایی بودن که به کمک ref میتونیم انجام بدیم. ref ابزار قدرتمندیه که به کمک دسترسی‌ای که به element ها داره باهاش کارهای خیلی زیادتری میشه انجام داد.

چگونه از ref استفاده کنیم؟

اول از همه این که چطوری یه ref رو به یه element اختصاص بدیم رو ببینیم:

برای این که چیزی که توی ref ذخیره شده رو بخونیم، از این سینتکس استفاده میکنیم:

console.log(divRef.current)

با این کار div ای که بهش ref رو پاس دادیم رو در کنسول خواهیم دید.
اما احتمالا این دیتایی نیست که ما میخوایم، مثلا میتونیم تکست داخل المنت رو توی log نشون بدیم، به این شکل:

console.log(divRef.current.innerText) // => Hello refs!

توی مثال بعدی، میخوایم ببینیم که چطوری میشه با استفاده از ref سایز یه element رو به دست آورد.

اگه روی این div کلیک کنیم، مقادیری که توی console می‌بینیم به ترتیب 200 و 100 خواهندبود.

مثال بعدی نمونه‌ای از استفاده ref برای focus به یه input هست:

با کلیک روی دکمه focus روی input انجام میشه. حتی میتونیم focus روی input ها رو اتوماتیک کنیم، به این شکل که مثلا با وارد شدن شماره موبایل، focus رو با استفاده از ref ای که به ورودی بعدی اختصاص دادیم، به ورودی بعدی انتقال بدیم.
یا همچنین میشه از

inputRef.current.scrollIntoView()

برای اسکرول به موقعیت input استفاده کرد.

مثال بعدی مثالی از دسترسی به متدهای element های فرزند (child) با استفاده از ‌ref هست:

آخرین مثالی که بررسی میکنیم یه مثال پیشرفته‌تر اما جذابه، تا حالا فکر کردین چطوری وقتی تو پیام‌رسان‌‌ها پیام میدیم، اسکرول صفحه تغییر میکنه به موقعیت آخرین پیام ارسال شده؟
اینطوری:

با استفاده از ref و useEffect ای که با هر تغییر توی message ها اجرا میشه، میتونیم بعد از اضافه شدن یه پیام جدید، اسکرول رو به محل اون پیام تغییر بدیم!

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