اذهب إلى المحتوى
  • 0

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

محمود_سعداوي

السؤال

عند تعلم الجافا سكريبت من الضرورة التطرق إلى الBOM  و لكن عند البدء باستخدام react هل يقع الاستغناء عن BOM أم أن hooks ستكون بديلا عنها.

شكرا.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

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

في ملف 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
 

تم التعديل في بواسطة علي محسن
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...