استفاده از document.querySelector در React اشتباهه؟

سلام سلام

چندروزی پیش داشتم یک پروژه تمرینی بازیسازی برای خودم با استفاده از React میزدم که طبق عادت از querySelector برای سلکت کردن element آیتم بازی استفاده کردم...

سوالی که برام پیش اومد این بود که آیا استفاده از این متد اشتباهه؟؟

متد querySelector چیه؟

قبل از هرچیزی یک توضیحی در باره کوئری سلکتور بدم...

querySelector یک از متد های DOM (Document Obejct Module) هستش که برای سلکت کردن یک element از DOM استفاده میشه

برای مثال شما یک تگ div با یک id با نام container دارید:

<div id=&quotcontainer&quot></div>

خوب برای اینکه ما بتونیم به این element دسترسی داشته باشیم تا چیزی اضافه کنیم یا تغییراتی بدیم، نیاز داریم که از متدهای سلکتور DOM استفاده کنیم.

document.getElementById(&quotcontainer&quot)
document.querySelector(&quot#container&quot)

میتونیم برای سلکت کردنش از DOM از هرکدوم از متدهای بالا استفاده کنیم.

دام مجازی (Virsual DOM) - یک نمایش جاوا اسکریپت از DOM واقعی

خوب همونطور که میدونین، React از یک دام مجازی یا همون Virsual DOM استفاده میکنه(اگر دوست دارین اطلاعات بیشتری راجب نحوه کارکرد و همینطور آشنایی بیشتر Virsual DOM بدونید، پیشنهاد میدم این مقاله رو بخونید) و این یکی از مزیت های ریکت هستش.

بنابراین، وقتی ما سعی میکنیم عنصر یا element رو با استفاده از querySelector تغییرات روش اعمال کنیم، دیگر در اینجا از Virsual DOM استفاده نمیکنیم.

خوده React، پیشنهاد کرده به جای استفاده از querySelector، از هوک useRef استفاده کنیم و مارو تشویق به این کار میکنه (بنابراین اشتباه نیست ولی بهتره به جاش از useRef استفاده کنیم). برای بهتر متوجه شدن این قضیه میتوانین این مقاله رو مطالعه کنید.

چطوری میتوانیم از هوک useRef استفاده کنیم؟

یک نمونه کد برای یک event ساده که وقتی روی یک دکمه ای کلیک شد، یک alert به ما بده:

import React, { useRef, useEffect } from &quotreact&quot
export default function App() {
    const buttonRef = useRef(null);
    useEffect(() => {
    const button = buttonRef.current;
    button.addEventListener(&quotclick&quot, () => {
        alert(&quotClicked!&quot);
    });
    }, []);
    return <button ref={buttonRef}>Click me</button>;
}

نظراتتون رو حتما برام بنویسین :)