اذهب الي المحتوي
منتديات ياللا يا شباب
Mohammed Tarek

ماهو اطار react؟

Recommended Posts

اليوم ، أصبحت أطر العمل والمكتبات الأمامية جزءًا أساسيًا من مجموعة تطوير الويب الحديثة. React.js هي مكتبة أمامية أصبحت تدريجيًا إطار عمل go-to لتطوير الويب الحديث داخل مجتمع JavaScript.

بالنسبة لأولئك المبتدئين في مجال تطوير الويب، أو الذين يحاولون اكتشاف سبب كل هذا العناء ، فلنلقِ نظرة على React، وكيف يعمل، وما الذي يجعله مختلفًا عن أطر عمل JavaScript الأخرى.

 

ما هو React.js؟

إطار عمل React.js هو إطار عمل JavaScript ومكتبة مفتوحة المصدر تم تطويرها بواسطة Facebook. يتم استخدامه لبناء واجهات مستخدم تفاعلية وتطبيقات ويب بسرعة وكفاءة مع رمز أقل بكثير مما تفعله مع Vanilla JavaScript. 

في React ، تقوم بتطوير تطبيقاتك عن طريق إنشاء مكونات قابلة لإعادة الاستخدام يمكنك التفكير فيها على أنها كتل Lego مستقلة. هذه المكونات عبارة عن أجزاء فردية من الواجهة النهائية، والتي، عند تجميعها، تشكل واجهة مستخدم التطبيق بالكامل.

يتمثل الدور الأساسي لـ React في تطبيق ما في التعامل مع طبقة العرض الخاصة بهذا التطبيق تمامًا مثل V في نموذج متحكم عرض النموذج (MVC) من خلال توفير تنفيذ العرض الأفضل والأكثر كفاءة. بدلاً من التعامل مع واجهة المستخدم بأكملها كوحدة واحدة ، يشجع React.js المطورين على فصل واجهات المستخدم المعقدة هذه إلى مكونات فردية قابلة لإعادة الاستخدام تشكل اللبنات الأساسية لواجهة المستخدم بأكملها. عند القيام بذلك، يجمع إطار عمل ReactJS بين سرعة وكفاءة JavaScript وطريقة أكثر فاعلية لمعالجة DOM لعرض صفحات الويب بشكل أسرع وإنشاء تطبيقات ويب ديناميكية وسريعة الاستجابة.

 

ماذا يفعل React.js؟

عادةً ما تطلب صفحة ويب عن طريق كتابة عنوان URL الخاص بها في متصفح الويب الخاص بك. ثم يرسل متصفحك طلبًا لصفحة الويب هذه، والتي يعرضها متصفحك. إذا قمت بالنقر فوق ارتباط في صفحة الويب هذه للانتقال إلى صفحة أخرى على موقع الويب ، فسيتم إرسال طلب جديد إلى الخادم للحصول على تلك الصفحة الجديدة.

يستمر نمط التحميل ذهابًا وإيابًا بين متصفحك (العميل) والخادم لكل صفحة أو مورد جديد تحاول الوصول إليه على موقع ويب. تعمل هذه الطريقة النموذجية لتحميل مواقع الويب بشكل جيد ، ولكن ضع في اعتبارك موقع ويب يعتمد على البيانات بشكل كبير. سيكون التحميل ذهابًا وإيابًا لصفحة الويب الكاملة زائداً عن الحاجة وسيخلق تجربة مستخدم سيئة.

بالإضافة إلى ذلك، عندما تتغير البيانات في تطبيق JavaScript تقليدي ، فإنها تتطلب معالجة DOM يدويًا لتعكس هذه التغييرات. يجب تحديد البيانات التي تم تغييرها وتحديث DOM لتعكس تلك التغييرات ، مما يؤدي إلى إعادة تحميل الصفحة بالكامل.

يتبع React أسلوبًا مختلفًا من خلال السماح لك بإنشاء ما يُعرف باسم تطبيق الصفحة الواحدة (SPA). يقوم التطبيق أحادي الصفحة بتحميل مستند HTML واحد فقط عند الطلب الأول. بعد ذلك ، يقوم بتحديث الجزء أو المحتوى أو الجسم المحدد لصفحة الويب الذي يحتاج إلى التحديث باستخدام JavaScript.

يُعرف هذا النمط باسم التوجيه من جانب العميل لأنه لا يتعين على العميل إعادة تحميل صفحة الويب الكاملة للحصول على صفحة جديدة في كل مرة يقدم فيها المستخدم طلبًا جديدًا. بدلاً من ذلك، تعترض React الطلب وتقوم فقط بجلب وتغيير الأقسام التي تحتاج إلى تغيير دون الحاجة إلى تشغيل إعادة تحميل صفحة كاملة. ينتج عن هذا النهج أداء أفضل وتجربة مستخدم أكثر ديناميكية كما نري في Talent Supplier.

تعتمد React على DOM ظاهري ، وهو نسخة من DOM الفعلي. تتم إعادة تحميل DOM الظاهري لـ React على الفور لعكس هذا التغيير الجديد كلما حدث تغيير في حالة البيانات. بعد ذلك ، يقارن React بين DOM الظاهري و DOM الفعلي لمعرفة ما الذي تغير بالضبط.

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

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

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

×   Your previous content has been restored.   Clear editor

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


×
×
  • اضف...

Important Information

By using this site, you agree to our Terms of Use, اتفاقيه الخصوصيه, قوانين الموقع, We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..