AG Coding

❤1

995 views22:24

خلينا نتكلم شوية عن السر اللي بيخلي المواقع المفضلة عندك سريعة ومستجيبة بالشكل ده. السر في الموضوع ده بيرجع لطريقة التعامل مع الـ DOM.
الـ (Document Object Model) بيمثل الصفحة بتاعتك على هيئة structured tree.
زمان كنا بنستخدم طرق في الـ JavaScript زي getElementById أو removeChild عشان نعمل تعديلات على الصفحة. لكن مع تعقيد المواقع الويب وتوسعها، الطرق دي ممكن تخلي الأداء بطيء. هنا بتيجي قوة React بالـ Virtual DOM اللي غيرت قواعد اللعبة تمامًا.
المشكلة في التعامل مع الـ DOM بالطريقة التقليدية
تخيل الـ DOM كشجرة ضخمة مليانة فروع. كل مرة تحب تعدل حاجة بسيطة، زي إنك تحدث أول عنصر في قائمة من عشر عناصر، بتضطر "تهز" الشجرة كلها. ده ممكن يبطأ الأداء، وخصوصًا لما الصفحات تبقى معقدة أكتر. كل ما زاد عدد الفروع (العناصر)، كل ما بقى الموضوع أصعب.
الحل مع React

React قدمت حل رائع للمشكلة دي عن طريق الـ Virtual DOM، وده نسخة خفيفة من الـ HTML DOM.
(a lightweight in-memory representation of the real DOM)
عشان بناءا عليها هنعمل reflect لل updated state
التعديلات بتتحط الأول في الـ Virtual DOM وبعدها React بتعمل تحديث للـ DOM الحقيقي بشكل فعال وسريع.
العملية دي اسمها Reconciliation، وبتخلي التحديثات تحصل بس في الأجزاء اللي محتاجة تحديث فعلي، وده بيحسن الأداء بشكل كبير.
إزاي الـ Virtual DOM بيشتغل
لما بتعمل Render لعناصر JSX في React،
الـ Virtual DOM بيتحدث محتاجين هنا نقف ونسأل سؤال مهم أوي بيتحدث كليا ولا ؟
React only updates the parts of the Virtual DOM that have changed. This is known as "incremental rendering" or "partial rendering".

، ده أسرع بكتير من التعامل المباشر مع الـ DOM الحقيقي. ده بيحصل لإن React بتعمل نسخة من الـ Virtual DOM قبل ما تعمل أي تحديثات، وبتقارن النسخة دي مع التحديثات باستخدام عملية اسمها Diffing أو ( Reconciliation) العملية دي بتحدد العناصر اللي حصل فيها تغيير فعلاً، وReact بتحدث بس العناصر دي في الـ DOM الحقيقي.
Under the Hood React’s Diffing Algorithm

الـ Diffing في React هي السر ورا التحديثات الفعالة للـ DOM. الAlgorithm دي بتقارن بين نسختين من الـ Virtual DOM وبتطبق أقل مجموعة من التغييرات اللي محتاجها عشان تزامنهم.
مثلاً، لو أنواع العناصر الأساسية (root elements) في الشجرتين مختلفة، React هتبني الشجرة كلها من جديد. يعني لو غيرت

<div>
<Tree/>
</div>
ل
<span>
<Tree/>
</span>
بما إن العناصر الأساسية (div وspan) مختلفة، React هتعيد بناء الtree كلها.
طب لو الحالة زي دي

<span id="span1" />
<span id="span2" />

في الحالة دي، React هتحدث بس الـ id من غير ما تلمس باقي العنصر.
React كمان بتحسن التحديثات على مستوى الChild Elements
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>

<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>

React هتشوف Child3 كعنصر جديد وهتحدث القائمة بناءً عليه. لكن لو أضفت عنصر جديد في البداية، React ممكن تعيد بناء القائمة كلها. وهنا بييجي دور الـ Keys.
الـ Keys بتساعد React إنها تتبع العناصر اللي حصل فيها تغيير، اللي اتضافت، أو اللي اتشالت. لازم تكون الـ Keys مميزة بين العناصر الsiblings يعني ميتككرش وثابتة بين الـ renders.
واتكلمت عنها قبل كده بالتفصيل !
Manipulating the DOM with Refs
رغم إن React بتعمل تحسينات على تحديثات الـ DOM باستخدام الـ Virtual DOM، في سيناريوهات معينة ممكن تحتاج فيها تتعامل مباشرة مع عناصر الـ DOM، زي إنك تركز على input معين، تعمل scroll لعناصر معينة، أو تقيس أبعاد عنصر. هنا بيجي دور الـ useRef Hook. من خلال إنشاء ref وربطه بعنصر DOM عن طريق ال ref، تقدر تحصل على الوصول المباشر للـ DOM node.
الـ useRef Hook بيرجع object فيه خاصية current، اللي بتبقى في الأول null لكن بتتخصص لـ DOM node بعد ما يتعمل Render. ده بيسمح لك تستدعي دوال الـ DOM مباشرة على العنصر، وده بيزود التحكم في التفاعلات المحددة.

خلينا نعمل مثال ممتع عشان نشوف الكلام ده في التطبيق. هنعمل div بيغير لونه لما تضغط على زرار. بص ع الصورة
فهم خوارزمية الـ Diffing والـ Keys في React هيساعدك تعمل تطبيقات React أنعم وأسرع لو فهمته صح

ولما تحتاج تحكم دقيق، React بتوفرلك refs اللي تساعدك تتفاعل مباشرة مع الـ DOM.

❤3👍1

1.19K views19:47