الفرق بين المراجعتين ل"React/faq internals"
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:DOM الافتراضي والكائنات الداخلية}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:DOM الافتراضي والكائنات الداخلية}}</noinclude> | <noinclude>{{DISPLAYTITLE:DOM الافتراضي والكائنات الداخلية}}</noinclude> | ||
| + | |||
| + | == ما هو DOM الافتراضي (Virtual DOM)؟ == | ||
| + | DOM الافتراضي (أو اختصارًا VDOM) هو مفهوم برمجي نحتفظ فيه بالتمثيل المثالي أو الافتراضي لواجهة المستخدم ضمن الذاكرة مع مزامنته مع DOM الحقيقي عن طريق مكتبة مثل React DOM. تُدعى هذه العمليّة [[React/reconciliation|بالمطابقة (reconciliation)]]. | ||
| + | |||
| + | تُمكِّن هذه الطريقة واجهة برمجة التطبيق التصريحية في React، حيث تُخبِر React الحالة التي تريد أن تكون بها واجهة المستخدم لديك، فتحرص React على مطابقة DOM مع تلك الحالة. يُجرِّد هذا التعامل مع الخاصيّات، ومعالجة الأحداث، وتحديث DOM اليدوي الذي يجب عليك استخدامه لبناء تطبيقك. | ||
| + | |||
| + | لمّا كانت كلمة DOM الافتراضي عبارة عن نمط أكثر من كونها تقنيّة محدّدة، فأحيانًا يقول بعض الناس هذه الكلمة ليقصدوا بها أشياء مختلفة. يرتبط المصطلح DOM الافتراضي في عالم React [[React/rendering elements|بعناصر React]] بما أنّها عبارة عن كائنات تُمثِّل واجهة المستخدم. على أيّة حالة تستخدم React أيضًا كائنات الداخليّة تُدعى بالألياف (fibers) للاحتفاظ بمعلومات إضافيّة حول شجرة المكونات. قد تُعتبر هذه الألياف جزءًا من تنفيذ DOM الافتراضي في React. | ||
| + | |||
| + | == هل DOM الخيالي (Shadow DOM) هو نفسه DOM الافتراضي (Virtual DOM)؟ == | ||
| + | لا، إنّهما مختلفان. حيث إنّ DOM الخيالي هو تقنية في المتصفّح مُصمَّمة بشكل أساسي لتحديد نطاق المتغيّرات وCSS في مكوّنات الويب. أمّا DOM الافتراضي هو مفهوم مُنفَّذ عن طريق مكتبات في JavaScript بناءً على واجهات برمجة تطبيق المتصفّح. | ||
| + | |||
| + | == ما هو React Fiber؟ == | ||
| + | Fiber هو مُحرِّك المطابقة الجديد في React 16. هدفه الأساسي هو تمكين التصيير التراكمي في DOM الافتراضي. اقرأ المزيد [https://github.com/acdlite/react-fiber-architecture من هنا]. | ||
| + | |||
| + | ==مصادر== | ||
| + | *[https://reactjs.org/docs/faq-internals.html صفحة DOM الافتراضي والكائنات الداخلية في توثيق React الرسمي]. | ||
| + | [[تصنيف:React]] | ||
مراجعة 10:13، 12 سبتمبر 2018
ما هو DOM الافتراضي (Virtual DOM)؟
DOM الافتراضي (أو اختصارًا VDOM) هو مفهوم برمجي نحتفظ فيه بالتمثيل المثالي أو الافتراضي لواجهة المستخدم ضمن الذاكرة مع مزامنته مع DOM الحقيقي عن طريق مكتبة مثل React DOM. تُدعى هذه العمليّة بالمطابقة (reconciliation).
تُمكِّن هذه الطريقة واجهة برمجة التطبيق التصريحية في React، حيث تُخبِر React الحالة التي تريد أن تكون بها واجهة المستخدم لديك، فتحرص React على مطابقة DOM مع تلك الحالة. يُجرِّد هذا التعامل مع الخاصيّات، ومعالجة الأحداث، وتحديث DOM اليدوي الذي يجب عليك استخدامه لبناء تطبيقك.
لمّا كانت كلمة DOM الافتراضي عبارة عن نمط أكثر من كونها تقنيّة محدّدة، فأحيانًا يقول بعض الناس هذه الكلمة ليقصدوا بها أشياء مختلفة. يرتبط المصطلح DOM الافتراضي في عالم React بعناصر React بما أنّها عبارة عن كائنات تُمثِّل واجهة المستخدم. على أيّة حالة تستخدم React أيضًا كائنات الداخليّة تُدعى بالألياف (fibers) للاحتفاظ بمعلومات إضافيّة حول شجرة المكونات. قد تُعتبر هذه الألياف جزءًا من تنفيذ DOM الافتراضي في React.
هل DOM الخيالي (Shadow DOM) هو نفسه DOM الافتراضي (Virtual DOM)؟
لا، إنّهما مختلفان. حيث إنّ DOM الخيالي هو تقنية في المتصفّح مُصمَّمة بشكل أساسي لتحديد نطاق المتغيّرات وCSS في مكوّنات الويب. أمّا DOM الافتراضي هو مفهوم مُنفَّذ عن طريق مكتبات في JavaScript بناءً على واجهات برمجة تطبيق المتصفّح.
ما هو React Fiber؟
Fiber هو مُحرِّك المطابقة الجديد في React 16. هدفه الأساسي هو تمكين التصيير التراكمي في DOM الافتراضي. اقرأ المزيد من هنا.