استفسار حول استخدام الـ BOM مع react js

لا لن تستغني عن الـ The Browser Object Model (BOM)، بل ستستخدم عناصر الـ BOM كما كنت تفعل مع js. وسيصبح استخدامها اكثر شمولية، لاسيما انه يوجد الكثير من المكتبات و الـ hooks الخاصة برياكت والتي تسهل التعامل مع الـ BOM ولاسيما موضوع التنقل بين الصفحات و الحصول على احداثيات العناصر واعطاء الخصائص اعتماداً على عناصر معينة من الـ BOM.

ويجب ان يكون تصورك عن الـ react بأنه بيئة عمل تمكن المطور من استخدام js بكل قوتها، وهو لن يحد من استخدام اي جانب من جوانب js لا الـ BOM ولا غيره. وستبقى قادراً على استخدام عناصر الـ BOM البدائية في react بالاضافة لما يوفره رياكت من hooks ومكتبات مختلفة.

الجواب على سؤالك هو نعم وكلا. وسأشرح لك لماذا مع الأمثلة.

في ملف html عادي أنت تقوم بالوصول الى خصائص العناصر والتلاعب بيها عن طريق جافاسكربت.

	...
	<div id="myDiv"></div>
	<script>
    var myDiv=document.getElementById("myDiv")
    
    myDiv.addEventListener("click", function(evt){
    
        myDiv.style.backgroundColor="blue"
    
    }) 
	</script>
	...
	

كما تلاحظ تم الوصول إلى العنصر بأستخدام getElementById  وتغيير لون الخلفية إلى الازرق

  إذا أردنا القيام بالشيء نفسه بإستخدام  React  نقوم بما يلي

...
  const myComponent= ( props ) => {
    
    const [bgColor, setBgColor] = useState("#fff")
	    return(
      <div onClick={(evt)=> setBgColor("blue")} style={{backgroundColor:bgColor}}></div>
    )
  }
...
	

هنا نلاحظ React يعطينا إستراتيجية مختلفة للتلاعب بعناصر html  عن طريق BOM.

يمكن إعادة إنتاج نفس الكود أعلاه ليعمل بمعية" document.getElementById"

...
  const myComponent= ( props ) => {
    
    const [bgColor, setBgColor] = useState("#fff")
    
    useEffect(() => {
        document.getElementById("myDiv").style.backgroundColor=bgColor
    }, [bgColor])
	    return(
      <div id="myDiv" onClick={(evt)=> setBgColor("blue")} ></div>
    )
  }
...
	

قد يعمل معك التحوير أعلاه ولكن في مشروع كبير أكثر تعقيداً  سيكون من الصعب صيانة الكود أو حتى تطويره.

React تنصح بإتباع طريقتها في التعامل مع DOM  ومع هذا تتيح لك إستعمال BOM داخل أي component لأنك ربما تحتاج إلى الوصول إلى دوال BOM مثلاً لإعادة توجيه المتصفح... أي بمعنى أخر BOM يعطيك أشياء أخرى غير التحكم في العناصر, تابع المثال التالي:

...
  const myComponent= ( props ) => {
   ...
      const login= async (data) => {
          let response =await Users.login(data)
	          if(response.status===200){
            window.location.replace("/dashboard");
          } else {
            alert("Login failed!")
          }
      }
  }
...
	

في المثال إعلاه دالة لتسجيل دخول المستخدم تتضمن في حالة نجاح تسجيل الدخول إعادة توجيهه الى صفحة أخرى أو عرض رسالة خطأ عند فشل تسجيل الدخول وكل هذا يتم من خلال إستعمال دوال BOM