بسم الله.

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

السؤال دلوقتي، هل ريئاكت فعلا بطيئه؟ و الاجابه هنا ممكن تقول على حسب، طب على حسب ايه؟ ببساطه على حسب طريقت كتابتك للكود.

خليني اديكوا مثال من تجربة حصلتلي شخصيا لما كنت بحاول اصمم ال cartStore بتاع موقع ecommerce, كلمت store للميعرفش هي حاجة مربوطة بالpublish/subscribe موديل و ده ممكن نعتبرة جزء من حاجه اسمهاEvent-driven architecture الي هو ممكن نعتبره قلب ريئاكت النابض و مكتبات تانية كتير لمميزات كتير فيه، بس ده مش موضوعنا انهارده، ايا كان، كنت بتسعمل للstore مكتبة في ريئاكت اسمها zustand و الصراحة تجربتي معاعها كويسة، عشان بس منخرجش برا الموضوع، بعد ما عملت الcartStore و كل حاجه كانت تمام كان فاضل بس انشأ الsubscribers و بما اننا اتكلمنا عن الpublish/subscribe مودل ففي السياق ده الpublisher هنا هو الcartStore و الsubscribers هيبقوا علي سبيل المثال الProductCards و الCart و ال CheckOut الخ...

من هنا بقى ممكن اقول يعني ايه كود مكتوب كويس و يعني ايه كود يعني يدوب شغال، بطبيعة الحال عشان لسه مكنش عندي خبرة مع ريئاكت، فكنت بقول للAI يكتبلي الكود و انا بعد كده بفهم هو كتب ايه سواء بإني اقوله يشرحلي او بإني ادور او هو اصلا كود js حاف و على هذا الاساس الدنيا بتمشي، الي لفت انتباهي لما حاولت اشغل الموقع على الموبايل بتاعي و عشان هو قديم شوية لقيت انوا لما كنت بحاول اضيف منتجات بسرعة كان بيبقى فيه لاج ملحوظ، في الاول كنت فاكر ان ده عادي بس قلت لما افتح تطبيق من تطبيقات الecommerce و اشوف لو حلاقي نفس الحاجه، فلقيت انو لاء و الموضوع عندهم كان سلس و مكانش فيه لاج و لا حاجه فقررت ارجع للكود.

السيستم الي شغال بي ريئكات انا مش بستلطفوا اوي الصراحة، عشان بحسوا بيحط overhead زائد عن الحد بدون داعي، و لكن خلينا نتفق ان من ناحية الstability فريكات عداه العيب فممكن نقول حاجه قصاد حاجه، ريكات ببساطه للميعرفش شغال بحاجه اسمها الvirtual dom و دي عباره عن دوم تانيه غير الdom الاساسيه هو بيكريتها و يعدل عليها لما اي تغير بيحصل بيؤدي الى re-rendering, الي هو لما اي hook يتعملوا trigger يعني، و الhooks دي للميعرفش هي اساس الEvent-driven architecture في ريئاكت الي كنت بتكلم عنوا، المهم، دلوقتي فzustand انت لما تيجي تعمل subscribe انت ممكن تعمل subscribe للstore كله او جزء منه و الجزء ده ممكن يبقي حتى جزء من الجزء، و اللعبه كلها هنا، ليه؟ عشان انت لو عملت subscribe مثلا للstore كله في component معين فإنت كده حتخلي الcomponent ده يعمل re-render كل ما اي حاجه في الstore تتغير سواء الحاجه دي كانت تهم الcomponent او لأ.

و ده الي كان حاصل عندي، كنت عامل over-subscribe في الProductCard component الي هو اصلا في منه كتير، فإتخيل كده معيا اني لما اعدل كيوزر اي تعديل بسيط على اي ProductCard كلهم بيعملوا re-render.

للأمانه انا عارف اني المفروض ادخل في التفاصيل و اوضحها اكتر بس مكسل، و لكن على ما اظن الفكره وضحت؟ العبرة انوا انت تخلي بالك و انت بتستعمل اي hook في ريئاكت عشان تقلل الscope الي بيحصل فيه re-rendering قدر المستطاع و انت طلاما فاهم ده فإن شاء الله حتخلي الAI يساعدك في تحقيق ده، و بس كده لحد هنا.

المجتمع الأكبر للعرب في مجال التك

(moham160640)

السوشيال ميديا

أحدث المقالات