كيفية عمل React.js ⚛️
عشان نفهم ازاي React شغال ؟
خلينا نعرف أي هو React ⚛️
React : هو JavaScript library بيساعدنا اننا نبني Web App بطريقة اسرع و اسهل و يتعامل مع البيانات بشكل أفضل بيشتغل بطريقة
SPA's ( Single page Applications ) دا تعريف مخل جداً بس في تعريف تاني بشوفو ابسط و أشمل
" React هي JavaScript library شائعة جداً , بتعتمد علي Component , و بتسخدم الحالة ( State ) , لبناء User Interface ( UI )
, و تم أنشائها بواسطة Facebook ."
-( Jonas Schmedtmann )
ملاحظة : من هنا هبداء اعتمد انك أشتغلت مع React قبل كدا أو سمعت عنها
ازاي ال React شغالة ؟
React بتعتمد أعتماد كلي ع فكرة Component و هو اننا بنقسم ال UI لي حجات أصغر و هي دي بقا ال Component ماشي , دلوقتي مراحل تحويل الكود لي UI بيظهر ع الشاشة
Component -> Component instances -> React Elements -> Dom Element -> UI on Screen
أنت دلوقتي فهمت ال Component
خلينا نتكلم عن ال Component Instances و بسهولة هو النسخة الفعلية البنشغل عليها من ال Component برضو يعني أي ,
ال Component عبارة عن حاوية فاضية أو نمط معين بنديلو مثلاً Props و بيكون في State خاصة بي بس مش دا البنشتغل علي لا أحنا بناخد نسخة منو أو أكتر من نسخة و كل واحدة ليها ال States الخاصة بيها و البيميزها
تقدر تفهم أكتر عن الموضوع دا لو بحثت عن " React Components, Instances, and Elements " علي medium.com
انا هدفي في المقال دا أني أشرحلك الجي أي البيحصل بعد كدا ؟
React Elements -> Dom Element -> UI on Screen
التلات خطوات القدامك في طريقة عمل ال React دول بيشتغلوا علي 4 مراحل و هناخدهم مرحلة مرحلة
1 ) Render is Triggered
2 ) Render Phase
3 ) Commit Phase
4 ) Browser Paint
أول مرحلة Render is Triggered
أحنا عندنا حالتين بيحصل فيهم عملية Trigger Render
الأولي Initial Render و دي أول مرة بيشتغل فيها التطبيق بتاعنا
التانية State is updated ( Re-render ) و دي لما يحصل تغير في التطبيق بتاعنا أو ان حصل تغير في الحالة ( State )
و المرحلة دي مفيهاش كلام كتير فخلينا نروح للمرحلة البعتها
تاني مرحلة معانا Render Phase
و هنا محتاجين نحط تعريف جديد لمعني Render أحنا كا Front-end بنستعمل كلمة render عشان اقول ان حصل تغير في ال UI و دا مش صح أوي الصح نقول انو بيجهز أو بيقدم ال UI للمرحلة البعتها أتفقنا كدا نكمل بقا
ال render phase بيتكون من شوية خطوات
1 ) Component instances that triggered re-render
ودي الخطوة البنكتشف أن في تغير حصل في ال Component بتاعنا
2 ) React Elements
و هي عبارة عن تجميع كل ال Components الفي المشروع و بنعمل منها حاجة أسمها virtual DOM Tree و دي عبارة عن شجرة بتوضح علاقة ال Component ببعضها و بتكون علي شكل Node و كل Parent لي child و نركز مع بعض في النقطة دي لما بيحصل تغير في ال parent بنضر أننا نغير في كل ال Children لل Component دي تمام
نكمل أزاي بيحصل التغير
في المرحلة دي هتمشي مجموعة خطوات مع بعض
أولاً هنجيب الشجرة الطلعت معانا في الاول
ثانياً هيظهر معانا حاجة أسمها Reconciler و دا بقا المسؤل عن أنو يعرف أي التغير الحصل و يقولي أي الحصل و يديني التفاصيل في React عندنا Reconciler أسمو ( Fiber ) دا لواحدو محتاج سلسة مقالات تشرحو فهتكلم عنو في أيجاز بس لو عايز تقدر تبحث عن
" What is React Fiber and How It Helps You Build a High-Performing React Applications " علي medium.com
" Building High-Performance Applications with React Fiber " علي dhiwise.com
اي هو Fiber نقدر نقول علي أن دا هو المسؤل عن توفيق المكونات بتاعتنا و يطلعنا و يقولنا انت عندك تغير في كذا و كذا و أتمسح كذا و كذا و أضاف كذا دا حاجة مخلة أكيد بس تقدر تقول علي كدا عندنا لما نبداء نتعامل مع Fiber كام مصطلح هيظهر معانا
أولاً Reconciliation
دا بقا البيحدد ال DOM elements الحصل فيها تحديث أو اتمسحت أو اتحطت عندنا
ثانياً Diffing
و دا بقا الخوارزمية البتقارن بين ال DOM و يعرف أن في تغير ازاي بيعرف عن طريق قعدتين سهلين
1 - لو نوع ال DOM elements أختلف
2 - لو أتغير ال Attributes أو Props
و الخوارزمية دي سرعت العمليات الكانت بتحصل من [ O( n3 ) ] لي [ O( n ) ] و دا خلا التطبيقات أسرع
ثالثاً ال Fiber Tree
و دا برضو شجرة بتتكون لما يحصل عندنا اول تشغل للتطبيق Initial Render بياخد ال virtual DOM Tree و يبني حاجة زيها بس في حبة اختلافات زي ان العلاقة هنا مش parent , child لا هنا علاقة بتعتمد علي العلاقة ما بين المكونات اكتر و في الشجرة دي بتوضحلنا حجات كتير زي
[ Current State - Props - Side Effects - Used Hooks - Queue of work ]
و طبعأً لازم نكون عارفين ان ال Render Phase هي asynchronously يعني أقدر اوقفها و اشغلها الغيها او ادي أولوية لعلمية عن عملية ع حسب الضرورة و الحاجة و مش بحتاج استنا ال Stack يفضا
و أخر العملية دي بحصل تغير لل Fiber Tree القديمة و طول ما التطبيق شغال ال fiber tree بيحصلها تجديد أول باول
و في أﻷخر بيطلع معانا من العملية دي حاجة اسمها " List of Effects " و دي بقا البيتروح للمرحلة البعدها
ثالثاً Commit phase
في المرحلة دي بناخد " List of Effects " من Render phase و دي عبارة عن قائمة بكل المتغيرات الحصلت و اللازم تتنفذ
بيتم التنفيذ في العملية دي عن طريق مكتبة تانية غير React و هي ReactDOM و دي بقا المسؤلة عن التحكم و التغير في ال DOM من خلال القائمة البتيجي من React و لتوضيح بس ReactDOM دي المكتبة البتتعامل مع Browser يعني لو غيرناها نقدر نتعامل مع حاجة تاني يعني مثلا ReactNative لو أستعملتها ممكن اتعامل مع انظمة IOS , Android خلينا نكمل لازم عملية التنفيذ تكون synchronous عشان مينفعش انفذ الواجهة بتاعتي بشكل جزئي عشان كدا في بيانات ناقصة
و رابعاً و أخيراً هي Browser Paint
و دي حاجة ملهاش علاقة ب React هي ليها علاقة أكتر بالمتصفحات و طرق العرض بتاعتها و بتختلف من متصفح لمتصفح تقدر تبحث عنها
" Populating the page: how browsers work " علي developer.mozilla.org ( MDN )
" Render-tree Construction, Layout, and Paint " علي web.dev
" The Anatomy of Browser Rendering: How Web Pages Come to Life " علي medium.com
" What is the DOM & How Does HTML Rendering Happen in Browsers " علي medium.com
أخر مقال هتلاقي شبه شوية العلي web.dev بس في حبة أضافات
دي شوية حجات تقدر برضو تشوفها
" react-fiber-architecture ( acdlite ) " علي Github
" render-and-commit " علي React.dev
و طبعاً مننساش كورس ( The Ultimate React Course 2024: React, Next.js, Redux & More ) لي Jonas Schmedtmann
can You follow me on my linktree
show English Blog on dev.to
تعليقات
إرسال تعليق