TechCodeview

DOM الحقيقي/المتصفح:

DOM لتقف على 'طراز كائن المستند'. إنه تمثيل منظم لـ HTML في صفحة الويب أو التطبيق. إنه يمثل واجهة المستخدم بأكملها (واجهة المستخدم) التابع تطبيق الويب كهيكل بيانات شجرة.

إنها التمثيل الهيكلي لعناصر HTML من تطبيق ويب بكلمات بسيطة.

كلما حدث أي تغيير في حالة واجهة المستخدم للتطبيق, يتم تحديث DOM ويمثل التغيير. يتم عرض DOM ومعالجته مع كل تغيير لتحديث واجهة مستخدم التطبيق، مما يؤثر على الأداء ويبطئه.

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

يتم إنشاء DOM كبنية بيانات شجرة. وهو يتألف من العقدة لكل منهما عنصر واجهة المستخدم موجودة في وثيقة الويب.

int إلى شار جافا

تحديث الدوم:

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

كلما حدث أي تغيير في حالة تطبيقك، يتم تحديث DOM ليعكس التغيير في واجهة المستخدم.

كيف يعمل Virtual DOM على تسريع الأمور:

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

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

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

كيف يساعد Virtual DOM في React:

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

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

على الرغم من أنه قد يبدو غير فعال، إلا أن التكلفة لم تعد كذلك، حيث أن تحديث DOM الافتراضي لا يمكن أن يستغرق الكثير من الوقت.

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

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

إنه يعمل على تحسين الأداء وهو السبب الرئيسي وراء حب المطورين لـ React وDOM الظاهري الخاص به.

ما هو DOM الافتراضي الخاص بـ React؟

يأتي مفهوم Virtual DOM ليجعل أداء Real DOM أفضل وأسرع. Virtual DOM هو رمز افتراضي لـ DOM.

لكن الاختلاف الرئيسي هو أنه في كل مرة، مع كل تغيير، يتم تحديث DOM الافتراضي بدلاً من DOM الفعلي.

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

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

الآن لدينا فهم طبيعي لـ DOM الحقيقي والافتراضي.

دعونا ننظر في كيفية ذلك تتفاعل يعمل باستخدام دوم افتراضي.

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

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

الشجرة المحدثة هي تم تحديث الدفعة (يتم إرسال التحديثات إلى DOM الحقيقي على دفعات بدلاً من إرسال التحديثات لكل تغيير في الحالة.) إلى DOM الحقيقي.

لكي نتعمق أكثر في هذا الأمر، علينا أن نعرف المزيد عن رد الفعل تقديم () وظيفة.

ومن ثم، علينا أن نعرف بعض الأمور المهمة سمات من رد الفعل.

JSX

JSX تمثل جافا سكريبت XML. إنها امتداد بناء الجملة من شبيبة. باستخدام JSX، يمكننا الكتابة هياكل HTML في الملف الذي يحتوي كود جافا سكريبت.

عناصر

المكونات هي مستقل و قابلة لإعادة الاستخدام من الكود. كل واجهة مستخدم في تطبيق React هي مكون. تطبيق واحد لديه الكثير عناصر.

المكونات هي من نوعين، مكونات الطبقة و المكونات الوظيفية.

تعتبر مكونات الفئة ذات حالة لأنها تستخدم 'حالتها' لتغيير واجهة المستخدم. المكونات الوظيفية هي مكونات عديمة الحالة. إنها تعمل مثل وظيفة JavaScript التي تأخذ معلمة عشوائية تسمى 'الدعائم'.

رد فعل السنانير تم تقديمها للوصول إلى الحالات ذات المكونات الوظيفية.

طرق دورة الحياة

أساليب دورة الحياة هي طرق مهمة مدمج للرد، والتي تعمل على المكونات خلال مدتها في DOM. لقد مر كل مكون من مكونات React بدورة حياة من الأحداث.

طريقة العرض () هي الحد الأقصى المستخدم طريقة دورة الحياة .

إنها الطريقة الوحيدة في الداخل رد فعل مكونات الطبقة . لذلك، في كل فئة، يتم استدعاء المكون render() .

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

المثال موضح أدناه:

 class Header extends React.Component{ render(){ return React Introduction } } 

سيظهر المثال JSX مكتوب في التقديم ().

عندما ولاية أو دعم يتم تحديثه داخل المكون، يجعل() سيُرجع شجرة مختلفة من عناصر React.

عند كتابة التعليمات البرمجية في وحدة التحكم أو ملف JavaScript، سيحدث ما يلي:

• يقوم المتصفح بتحليل HTML للعثور على العقدة ذات المعرف.
• يقوم بإزالة العنصر الفرعي للعنصر.
• يقوم بتحديث العنصر (دوم) مع ال 'القيمة المحدثة'.
• إنه يعيد حساباته CSS للعقد الأصل والطفل.
• ثم قم بتحديث التخطيط.

أخيرًا، قم باجتياز الشجرة التي تظهر على شاشة العرض.

لذلك كما نعلم أن تحديث DOM ينطوي على تغيير المحتوى. وهو أكثر تعلقا به.

تشارك الخوارزميات المعقدة في إعادة حساب CSS وتغيير التخطيطات، مما يؤثر على الأداء.

لذا، لدى React طرق عديدة للتعامل معها، حيث أنها تستخدم شيئًا يُعرف باسم Virtual DOM.

com.reactdome

توفر حزمة React-dom أساليب خاصة بـ DOM في المستوى الأعلى من التطبيق للهروب من نموذج React إذا لزم الأمر.

 import * as ReactDOM from 'react-dom'; 

إذا كنت تستخدم ES5 مع npm، فيجب عليك أيضًا كتابة:

 var ReactDOM = require('react-dom'); 

ال رد فعل دوم توفر الحزمة أيضًا وحدات خاصة بتطبيقات العميل والخادم:

• رد فعل دوم/client
• رد فعل دوم/الخادم

تقوم حزمة رد فعل دوم بتصدير هذه الأساليب:

• كريتبورتال ()
• فلوسينك ()

يتم أيضًا تصدير أساليب رد الفعل:

• يجعل ()
• هيدرات ()
• العثور على DOMNode()
• إلغاء تحميل ComponentAtNode ()

ملاحظة: تم استبدال كل من الهيدرات والتصيير بطرق عميل أحدث.

دعم المتصفح

تدعم React جميع المتصفحات الحديثة، وبعض عمليات التعبئة المتعددة مطلوبة للإصدارات الأقدم.

ملاحظة: لا يمكننا دعم المتصفحات القديمة التي لا تدعم أساليب ES5، مثل Internet Explorer. يمكنك أن تجد أن التطبيقات تعمل في أحدث المتصفحات في حالة وجود ملفات متعددة مثل es5-shim وes5-sham المضمنة في الصفحة، ولكنك وحدك إذا سلكت المسار.

مرجع

كريتبورتال ()

الأبجدية إلى أرقام

إنشاء بوابة () توفر البوابة طريقة لقراءة العناصر الفرعية في عقدة DOM، الموجودة خارج ترتيب مكون DOM.

فلوسينك ()

فرض تحديثات React في رد الاتصال المقدم في وقت واحد. فهو يضمن تحديث DOM على الفور.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

ملحوظة:

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

مرجع تراث

يجعل()

 render(element, container[, callback]) 

ملحوظة: يتم استبدال Render بإنشاء Root في React. قم بصياغة عنصر React في DOM في الحاوية المتوفرة وأعد مرجعًا للمكون.

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

يتم تنفيذه عندما يتم تقديم المكون إذا تم توفير رد الاتصال الاختياري.

ملحوظة:

تتحكم طريقة Render () في محتوى عقدة الحاوية عند مرورها. يتم استبدال أي عنصر DOM موجود.

لا يغير Render () عقدة الحاوية (يمكنه فقط تعديل العقد الفرعية للحاوية). قد يكون من الممكن إدراج مكون في عقدة DOM موجودة دون الكتابة فوق العناصر الفرعية.

يشير Render () حاليًا إلى المثيل الجذري لـ ReactComponent.

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

إذا كنت بحاجة إلى مرجع إلى النموذج الأولي ReactComponent، فإن الحل الأفضل هو إرفاق مرجع استدعاء للعنصر.

يتم استخدام Render () لترطيب الحاوية المقدمة إلى الخادم وقد عفا عليها الزمن. يستخدم جذر الهيدرات () بدلا من ذلك.

هيدرات()

يتم استبدال الهيدرات بجذر الهيدرات.

إنه تمامًا مثل render() ولكنه يُستخدم للحاوية التي يتم عرض محتوى HTML الخاص بها بواسطة ReactDOMServer. ستحاول React ربط مستمعي الأحداث بالترميز الحالي.

 hydrate(element, container[, callback]) 

ملحوظة:

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

ليس هناك ما يضمن تصحيح اختلافات محددة بسبب التناقضات.

يعد ذلك مهمًا لأسباب تتعلق بالأداء في معظم التطبيقات، وسيكون التحقق من صحة كافة العلامات مكلفًا للغاية.

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

إذا لم يكن عنصرًا نصيًا، فلا يمكنه محاولة تصحيحه بحيث يظل غير متناسق حتى التحديثات المستقبلية.

يمكنك إجراء عرض ثنائي المرور إذا أردنا تقديم معلومات مختلفة على الخادم والعميل عمدًا. يمكن للمكونات المتبقية على العميل قراءة متغيرات الحالة مثل this.state.isClient، حيث سيتم ضبطها على true في مكونDidMount().

سوف يقوم تمرير العرض الأولي بنفس عمل الخادم، مع تجنب التناقضات، ولكن سيتم إجراء تمرير إضافي بشكل متزامن بعد الترطيب.

ملاحظة: هذا الأسلوب سيجعل المكونات أبطأ لأنها تفعل ذلك مرتين، لذا استخدمه بعناية.

 unmountComponentAtNode() unmountComponentAtNode(container) 

ملحوظة:

unmountComponentAtNode تم استبداله بـ الجذر. إلغاء التحميل () في رد الفعل. يقوم بمسح مكون React المثبت من DOM وينظف معالجات الأحداث وحالتها.

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

سلسلة عكسية جافا

العثور على DOMNode()

ملاحظة: findDOMNode عبارة عن فتحة هروب تُستخدم للوصول إلى عقدة DOM الأساسية. لا يُنصح بفتحة الهروب هذه في معظم الحالات لأنها تخترق تجريد المكونات. لقد تم إهماله في StrictMode.

FindDOMNode(مكون)

إذا تم تثبيت هذا المكون على DOM، فسيُرجع هذا عنصر DOM للمتصفح الأصلي المقابل. هذه الطريقة مفيدة لقراءة القيم من DOM، مثل قيم حقل النموذج وإجراء قياسات DOM. في معظم الحالات، يمكنك إرفاق مرجع بعقدة DOM وتجنب استخدام findDOMNode.

عندما يُرجع أحد المكونات قيمة فارغة أو خطأ، فإن findDOMNode يُرجع قيمة فارغة. عندما يتم تصيير مكون إلى سلسلة، يقوم findDOMNode بإرجاع عقدة DOM نصية تحتوي على تلك القيمة. يمكن للمكون إرجاع جزء يحتوي على عدة أطفال في حالة قيام findDOMNode بإرجاع عقدة DOM المقابلة لأول طفل غير فارغ.

ملحوظة:

يعمل findDOMNode فقط على المكونات المثبتة (أي المكونات التي تم وضعها في DOM). إذا حاولت استدعاء هذا على مكون لم يتم تثبيته بعد (مثل استدعاء findDOMNode() على render() على مكون لم يتم إنشاؤه بعد)، فسيتم طرح استثناء.

لا يمكن استخدام findDOMNode في مكونات الوظيفة.

عناصر DOM

تطبق React نظام DOM مستقل عن المتصفح من أجل الأداء والتوافق عبر المتصفحات. ننتهز هذه الفرصة لتنظيف بعض الجوانب الصعبة في تنفيذ DOM للمتصفح.

في React، يجب أن تكون جميع خصائص وسمات DOM (بما في ذلك معالجات الأحداث) على شكل حرف الجمل. على سبيل المثال، تتوافق سمة HTML tabindex مع سمة tabindex في React.

الاستثناءات هي سمات aria-* وdata-*، والتي يجب أن تكون بأحرف صغيرة. على سبيل المثال، يمكن أن يكون لديك علامة منطقة كعلامة منطقة.

رقم جافا إلى السلسلة

الاختلافات في السمات

ستعمل عدة سمات بشكل مختلف بين React وHTML:

التحقق

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

DefaultChecked هو النظير الذي لم يتم التحقق منه والذي يحدد أن المكون قد تم فحصه عند تثبيته لأول مرة.

اسم الفئة

لتحديد فئة CSS، استخدم سمة className. وينطبق ذلك على جميع عناصر DOM وSVG العادية مثل، ، إلخ.

إذا كنت تستخدم React with Web Components (غير شائع)، فاستخدم السمة class بدلاً من ذلك.

خطيرSetInnerHTML

Dangerously SetInnerHTML هو بديل React لاستخدام InternalHTML في متصفح DOM. يعد تكوين تعليمات HTML البرمجية أمرًا محفوفًا بالمخاطر لأنه من السهل تعريض المستخدمين لهجوم البرمجة النصية عبر المواقع (XSS).

لذلك يمكننا ضبط HTML مباشرة من React، ولكن عليك كتابة SetInnerHTML بشكل خطير وتمرير كائن باستخدام مفتاح __html لتتذكر أنه خطير.

على سبيل المثال:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

تستخدم عناصر React htmlFor بدلاً من ذلك، نظرًا لأن for هي كلمة محجوزة في JavaScript.

على التغيير

يتصرف الحدث onChange كما هو متوقع؛ يتم إطلاق الحدث في كل مرة يتم فيها تغيير حقل النموذج.

نحن لا نستخدم سلوك المتصفح الحالي عمدًا لأن التغيير كبير بالنسبة لسلوكه وتعتمد React على الحدث للتعامل مع مدخلات المستخدم في الوقت الفعلي.

المحدد

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

ملحوظة:

في أقصى الحالات، تشير أسماء الفئات إلى الفئات المحددة في ورقة أنماط CSS خارجية. تُستخدم الأنماط في تطبيقات React لإضافة أنماط محسوبة في وقت العرض. تقبل سمة النمط كائن JavaScript بخصائص الجمل بدلاً من سلسلة CSS.

إنه يتوافق نمط DOM خصائص جافا سكريبت أكثر كفاءة وتتجنبها XSS الثغرات الأمنية.

على سبيل المثال:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

لاحظ أن: الأنماط ليست مسبوقة تلقائيًا. لدعم المتصفحات القديمة، نحتاج إلى توفير خصائص النمط:

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

مفاتيح النمط هي الجمل لتتوافق مع الوصول إلى الخصائص على عقد DOM من داخل JS. تبدأ بادئات الموفر MS بحرف كبير.

ستضيف React تلقائيًا لاحقة 'px' إلى بعض خصائص نمط الأرقام المضمّنة. إذا أردنا استخدام وحدات أخرى غير 'px'، فحدد القيمة كسلسلة تحتوي على الوحدة المطلوبة.

على سبيل المثال:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

ومع ذلك، لا يتم تحويل كافة خصائص النمط إلى سلاسل بكسل.

قمع تنبيه المحتوى القابل للتحرير

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

تحذير من القمع

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

إذا قمت بتعيين تحذير المنع على صحيح، فلن يحذرك من عدم التطابق بين السمات ومحتوى العنصر.

لقد كان يعمل فقط على عمق مستوى واحد وكان من المفترض أن يستخدم كمهرب.

قيمة

تم تصميم سمة القيمة بواسطة المكونات. يمكنك استخدامه لتحديد قيمة المكون.

إنه مفيد لتصنيع المكونات الخاضعة للرقابة. defaultValue وتساوي قيمة غير محددة قم بتعيين قيمة المكون عند تركيبه بشكل تسلسلي.

جميع سمات HTML المدعومة

يتم دعم أي سمة DOM مخصصة وقياسية.

قدمت React واجهة برمجة تطبيقات تتمحور حول JavaScript في DOM. وغالبًا ما تحتوي مكونات React على خاصيات مخصصة ومتعلقة بـ DOM، ومن ثم تستخدم React نفس اصطلاحات CamelCase مثل واجهة DOM API:

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API