محمود_سعداوي نشر 29 أغسطس 2022 أرسل تقرير مشاركة نشر 29 أغسطس 2022 عند تعلم الجافا سكريبت من الضرورة التطرق إلى الBOM و لكن عند البدء باستخدام react هل يقع الاستغناء عن BOM أم أن hooks ستكون بديلا عنها. شكرا. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 علي عبد محسن نشر 30 أغسطس 2022 أرسل تقرير مشاركة نشر 30 أغسطس 2022 (معدل) الجواب على سؤالك هو نعم وكلا. وسأشرح لك لماذا مع الأمثلة. في ملف 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 تم التعديل في 30 أغسطس 2022 بواسطة علي محسن اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 29 أغسطس 2022 أرسل تقرير مشاركة نشر 29 أغسطس 2022 لا لن تستغني عن الـ The Browser Object Model (BOM)، بل ستستخدم عناصر الـ BOM كما كنت تفعل مع js. وسيصبح استخدامها اكثر شمولية، لاسيما انه يوجد الكثير من المكتبات و الـ hooks الخاصة برياكت والتي تسهل التعامل مع الـ BOM ولاسيما موضوع التنقل بين الصفحات و الحصول على احداثيات العناصر واعطاء الخصائص اعتماداً على عناصر معينة من الـ BOM. ويجب ان يكون تصورك عن الـ react بأنه بيئة عمل تمكن المطور من استخدام js بكل قوتها، وهو لن يحد من استخدام اي جانب من جوانب js لا الـ BOM ولا غيره. وستبقى قادراً على استخدام عناصر الـ BOM البدائية في react بالاضافة لما يوفره رياكت من hooks ومكتبات مختلفة. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
عند تعلم الجافا سكريبت من الضرورة التطرق إلى الBOM و لكن عند البدء باستخدام react هل يقع الاستغناء عن BOM أم أن hooks ستكون بديلا عنها.
شكرا.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.