DOM אמיתי/דפדפן:

DOM מייצג 'מודל אובייקט מסמך'. זהו ייצוג מובנה של HTML בדף האינטרנט או באפליקציה. זה מייצג את כל ממשק המשתמש (ממשק משתמש) של ה יישום אינטרנט כמבנה נתוני העץ.

זה ייצוג מבני של רכיבי HTML של יישום אינטרנט במילים פשוטות.

בכל פעם שיש שינוי כלשהו ב מצב ממשק המשתמש של האפליקציה, DOM מעודכן ומייצג את השינוי. ה-DOM מעובד ומתופעל עם כל שינוי לעדכון ממשק המשתמש של האפליקציה, מה שמשפיע על הביצועים ומאט אותם.

לכן, עם רכיבי ממשק משתמש רבים והמבנה המורכב של DOM, זה יתעדכן יקר יותר מכיוון שיש צורך לעבד אותו מחדש עם כל שינוי.

ה-DOM מורכב כמבנה נתוני עץ. הוא מורכב מהצומת עבור כל אחד מהם אלמנט ממשק משתמש קיים במסמך האינטרנט.

היגיון מסדר ראשון

מעדכן את ה-DOM:

אם אנחנו יודעים קצת על JavaScript, ייתכן שתראה אנשים המשתמשים ב- 'getElementById()' אוֹ 'getElementByClass()' שיטה לשנות את התוכן של DOM.

בכל פעם שמתרחש שינוי כלשהו במצב האפליקציה שלך, ה-DOM מתעדכן כך שישקף את השינוי בממשק המשתמש.

כיצד Virtual DOM מאיץ את הדברים:

כאשר דברים חדשים נוספים לאפליקציה, נוצר ה-DOM הווירטואלי, המיוצג כעץ. כל רכיב באפליקציה הוא צומת בעץ.

לכן, בכל פעם שיש שינוי במיקום של אלמנט, נוצר DOM וירטואלי חדש. עץ ה-DOM הוירטואלי החדש יותר מושווה לעץ האחרון, שבו מצוינים השינויים.

הוא מוצא את הדרך האפשרית לבצע שינויים אלה על ידי ה-DOM בפועל. אז הרכיבים המעודכנים יעבדו מחדש בדף.

כיצד DOM וירטואלי עוזר בתגובה:

הכל ב-React נצפה כרכיב, רכיב פונקציונלי ורכיב מחלקה. לרכיב יש מצב. בכל פעם שאנו משנים משהו בקובץ JSX, בפשטות, בכל פעם שמצב הרכיב משתנה, ה-react מעדכן את עץ ה-DOM הוירטואלי שלו.

React שומרת על שני DOMs וירטואליים בכל פעם. הראשון מכיל את ה-DOM הוירטואלי המעודכן, והשני הוא גרסה מעודכנת מראש של ה-DOM הוירטואלי המעודכן. הוא משווה את הגרסה המעודכנת מראש של ה-DOM הוירטואלי המעודכן ומוצא מה השתנה ב-DOM, כמו אילו רכיבים ישתנו.

למרות שזה עשוי להיראות לא יעיל, העלות אינה יותר, שכן עדכון ה-DOM הוירטואלי לא יכול לקחת הרבה זמן.

כאשר משווים את עץ ה-DOM הווירטואלי הנוכחי עם הקודם ידוע בשם 'מתריס'. ברגע ש-React יודע מה השתנה, הוא מעדכן את האובייקטים ב-DOM בפועל. React משתמש בעדכוני אצווה כדי לעדכן את ה-DOM בפועל. השינויים ב-DOM בפועל נשלחים באצווה במקום לשלוח עדכונים כלשהם עבור השינוי הבודד למצב הרכיב.

עיבוד מחדש של ממשק המשתמש הוא החלק היקר ביותר, וראקט מצליחה לעשות בצורה היעילה ביותר על ידי הבטחת ה-Real DOM שמקבל את עדכוני האצווה לעיבוד מחדש של ממשק המשתמש. תהליך המרת השינויים ל-DOM בפועל נקרא פִּיוּס.

זה משפר את הביצועים וזו הסיבה העיקרית שמפתחים אוהבים את תגובה ואת ה- DOM הווירטואלי שלו.

מהו ה- DOM הווירטואלי של React?

הרעיון של Virtual DOM בא להפוך את הביצועים של Real DOM לטובים ומהירים יותר. DOM וירטואלי הוא סמל וירטואלי של ה-DOM.

אבל ההבדל העיקרי הוא שבכל פעם, עם כל שינוי, ה-DOM הווירטואלי מתעדכן במקום ה-DOM בפועל.

לדוגמה, ה אמיתי ו DOM וירטואלי מיוצג בתור א מבנה עץ. כל אלמנט בעץ הוא צומת. א צוֹמֶת מתווסף לעץ כאשר פריט חדש נוסף לממשק המשתמש של האפליקציה.

אם המיקום של אלמנטים כלשהם משתנה, א חָדָשׁ נוצר עץ DOM וירטואלי. ה-DOM הוירטואלי מחשב את המספר המינימלי של פעולות ב-DOM האמיתי כדי לבצע שינויים ב-DOM האמיתי. זה יעיל ומתפקד טוב יותר על ידי הפחתת העלות והתפעול של עיבוד מחדש של כל ה-DOM האמיתי.

כעת יש לנו הבנה נורמלית של DOM אמיתי וווירטואלי.

בואו נראה איך לְהָגִיב עובד באמצעות שימוש DOM וירטואלי.

• כל ממשק משתמש הוא אינדיבידואלי רְכִיב, ולכל רכיב יש את המצב שלו.
• תגוב בהמשך דפוסים הניתנים לצפייה ומתבונן בשינויים במדינות.
• בכל פעם שנעשה שינוי במצב הרכיב, React מעדכן את עץ ה-DOM הווירטואלי אבל לא משנה את עץ DOM בפועל.
• לְהָגִיב משווה ה גרסה נוכחית של ה DOM וירטואלי עם ה גרסה קודמת לאחר עִדכּוּן.
• React יודע אילו אובייקטים משתנים ב- DOM וירטואלי. זה מחליף את האובייקטים ב DOM בפועל , מוביל ל מניפולציה מינימלית פעולות.
• תהליך זה ידוע בשם 'בידול'. תמונה זו תבהיר את הרעיון.

בתמונה, ה כחול כהה מעגלים הם ה צמתים שהשתנו. ה מדינה של רכיבים אלה השתנה. React מחשבת את ההבדל בין הגרסה הקודמת לגרסה הנוכחית של עץ DOM וירטואלי, וכל תת-עץ האב מעובד מחדש כדי להציג את ממשק המשתמש ששונה.

העץ המעודכן הוא אצווה מעודכנת (שעדכונים ל-DOM האמיתי נשלחים באצווה במקום לשלוח עדכונים עבור כל שינוי מצב.) ל-DOM האמיתי.

כדי להעמיק בזה, אנחנו צריכים לדעת על עיבוד תגובה () פוּנקצִיָה.

לאחר מכן, עלינו לדעת על חלק מהדברים החשובים מאפיינים של React.

JSX

JSX מייצג JavaScript XML. זה סיומת תחביר של JS. באמצעות JSX, אנו יכולים לכתוב מבני HTML בקובץ שמכיל קוד JavaScript.

רכיבים

רכיבים הם עצמאי ו לשימוש חוזר של קוד. כל ממשק משתמש באפליקציית React הוא רכיב. לאפליקציה אחת יש הרבה רכיבים.

הרכיבים הם משני סוגים, רכיבי הכיתה ו רכיבים פונקציונליים.

רכיבי המחלקה הם סטטיסטיים מכיוון שהם משתמשים ב'מצב' שלהם כדי לשנות את ממשק המשתמש. רכיבים פונקציונליים הם רכיבים חסרי מדינה. הם פועלים כמו פונקציית JavaScript שלוקחת פרמטר שרירותי שנקרא 'אביזרים'.

React Hooks הוכנסו לגישה למצבים עם רכיבים פונקציונליים.

שיטות מחזור חיים

שיטות מחזור חיים הן שיטות חשובות מובנה להגיב, הפועלים על רכיבים לאורך משך הזמן שלהם ב-DOM. כל רכיב של React עבר מחזור חיים של אירועים.

השיטה render() היא המקסימום בשימוש שיטת מחזור החיים .

זו השיטה היחידה בפנים רכיבי כיתה תגובה . אז, בכל מחלקה, רכיב render() נקרא.

שיטת העיבוד (). מטפל בעיבוד של הרכיב על ידי ממשק המשתמש. העיבוד () מכיל את כל ההיגיון המוצג על המסך. זה יכול להיות גם א ריק ערך אם אנחנו לא רוצים להציג שום דבר בתצוגה.

הדוגמה מוצגת להלן:

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

הדוגמה תראה את JSX כתוב ב-render().

כש מדינה אוֹ לִתְמוֹך מתעדכן בתוך הרכיב, לְדַקלֵם() יחזיר עץ אחר של רכיבי React.

בעת כתיבת הקוד במסוף או בקובץ ה-JavaScript, אלה יקרו:

• הדפדפן מנתח את ה-HTML כדי למצוא את הצומת עם המזהה.
• זה מסיר את האלמנט הבן של האלמנט.
• זה מעדכן את האלמנט (DOM) עם ה 'ערך מעודכן'.
• זה מחשב מחדש CSS עבור צמתי הורה וילד.
• לאחר מכן, עדכן את הפריסה.

לבסוף, חצו את העץ בתצוגת המסך.

אז כפי שאנו יודעים כי עדכון ה DOM כרוך בשינוי התוכן. זה יותר קשור לזה.

אלגוריתמים מורכבים מעורבים בחישוב מחדש של CSS ושינוי הפריסות, המשפיעים על הביצועים.

אז ל-React יש דרכים רבות להתמודד איתה, מכיוון שהיא משתמשת במשהו המכונה DOM וירטואלי.

reactdome

חבילת react-dom מספקת שיטות ספציפיות ל-DOM ברמה העליונה של האפליקציה לנתיב מילוט אל מחוץ למודל React במידת הצורך.

 import * as ReactDOM from 'react-dom'; 

אם אתה משתמש ב-ES5 עם npm, עליך לכתוב גם:

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

ה react-dom החבילה מספקת גם מודולים ספציפיים ליישומי הלקוח והשרת:

• react-dom/client
• react-dom/שרת

חבילת react-dom מייצאת את השיטות האלה:

• createPortal()
• flushSync()

שיטות ה-react-dom מיוצאות גם:

• עיבוד ()
• לחות ()
• findDOMNode()
• unmountComponentAtNode ()

הערה: גם hydrate וגם render הוחלפו בשיטות לקוח חדשות יותר.

תמיכה בדפדפן

React תומך בכל הדפדפנים המודרניים, וחלק מהפוליפילים נדרשים עבור גרסאות ישנות יותר.

הערה: איננו יכולים לתמוך בדפדפנים ישנים שאינם תומכים בשיטות ES5, כמו Internet Explorer. אתה יכול לגלות שאפליקציות פועלות בדפדפנים העדכניים ביותר אם פולפילים כמו es5-shim ו-es5-sham הכלולים בדף, אבל אתה לבד אם אתה הולך בדרך.

התייחסות

createPortal()

יוצר פורטל () פורטל מספק את הדרך לקרוא ילדים לתוך צומת ה-DOM, שקיים מחוץ לדירוג של רכיב ה-DOM.

flushSync()

Force 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]) 

הערה: העיבוד מוחלף ביצירת שורש ב-React. עבד רכיב React לתוך ה-DOM במיכל שסופק והחזר הפניה לרכיב.

אם רכיב React הוצג בעבר למיכל כלשהו, ​​הוא יבצע עליו עדכון, ויש צורך לשקף את האלמנט האחרון של React.

זה מבוצע כאשר הרכיב מעובד אם התקשרות חוזרת אופציונלית מסופקת.

הערה:

string.compare c#

שיטת Render () שולטת בתוכן של צומת המכולה כשהוא חולף על פניו. כל רכיב DOM קיים מוחלף.

עיבוד () אינו משנה את הצומת של המיכל (הוא יכול לשנות רק את הילדים של המיכל). ייתכן שניתן יהיה להכניס רכיב לצומת DOM קיים מבלי להחליף את רכיבי הצאצא.

render () כעת הפניה חזרה למופע הבסיס של ReactComponent.

עם זאת, ערך ההחזר שלו עובר בירושה וניתן להימנע ממנו מכיוון שבמקרים מסוימים, גרסאות עתידיות של React עשויות ליצור רכיבים באופן אסינכרוני.

אם אתה צריך הפניה לאב-טיפוס של ReactComponent, הפתרון הטוב ביותר הוא לצרף הפניה לרכיב.

עיבוד () משמש כדי ללחלח מיכל מעובד לשרת מיושן. להשתמש hydrateRoot() במקום זה.

מֵימָה()

הידרט מוחלף בשורש ההידראט.

זה בדיוק כמו render() אבל משמש עבור מיכל שתוכן ה-HTML שלו מעובד על ידי ReactDOMServer. React תנסה לחבר מאזינים לאירועים לסימון הנוכחי.

 hydrate(element, container[, callback]) 

הערה:

React מצפה שהתוכן המעובד יהיה זהה בין השרת ללקוח. אנו יכולים לתקן את תוכן הטקסט, אך עלינו להתייחס לחוסר העקביות כאל שגיאות ולתקן אותן. במצב פיתוח, React מזהיר מפני חוסר העקביות במהלך הידרציה.

אין ביטחון שהבדלים ספציפיים מתוקנים לאי-התאמות.

זה חשוב מטעמי ביצועים ברוב היישומים, וזה יהיה יקר מדי לאמת את כל הדגלים.

נניח שהתכונה או תוכן הטקסט של אלמנט שונה בהכרח בין השרת ללקוח (לדוגמה, חותמת הזמן ). במקרה זה, נוכל להשתיק את ההתראה על ידי הוספה suppressHydrationWarning = {true} לאלמנט.

אם זה לא רכיב טקסט, הוא לא יכול לנסות לתקן אותו כך שהוא עלול להישאר לא עקבי עד לעדכונים עתידיים.

אתה יכול לבצע רינדור שני מעברים אם אנחנו צריכים לספק שונה בשרת ובלקוח בכוונה. רכיבים שנותרו בלקוח יכולים לקרוא משתני מצב כמו this.state.isClient, שם הוא יוגדר כ-true ב- componentDidMount().

מעבר העיבוד הראשוני יעשה את אותו הדבר כמו השרת, ימנע חוסר עקביות, אך המעבר הנוסף יתבצע באופן סינכרוני לאחר הידרציה.

הערה: גישה זו תהפוך את הרכיבים לאיטיים יותר מכיוון שהם עושים זאת פעמיים, אז השתמש בזה בזהירות.

 unmountComponentAtNode() unmountComponentAtNode(container) 

הערה:

unmountComponentAtNode הוחלף ב root.unmount() ב-React. הוא מוחק את רכיב React המותקן מה-DOM ומנקה את מטפלי האירועים ואת המצב שלו.

אם לא הותקן רכיב למיכל, הוא לא יכול לעשות דבר. מחזירה true אם אף רכיב אינו מותקן ו-false אם אין רכיב לביטול.

findDOMNode()

הערה: findDOMNode הוא פתח מילוט המשמש לגישה לצומת ה-DOM הבסיסי. פתח מילוט זה מונע ברוב המקרים מכיוון שהוא חודר את הפשטת הרכיב. זה הוצא משימוש ב-StrictMode.

findDOMNode(component)

אם רכיב זה הותקן ל-DOM, זה מחזיר את רכיב ה-DOM המקורי של הדפדפן. שיטה זו שימושית לקריאת ערכים מה-DOM, כגון ערכי שדות טופס, וביצוע מדידות DOM. ברוב המקרים, ניתן לצרף הפניה לצומת DOM ולהימנע משימוש ב-findDOMNode.

כאשר רכיב מחזיר null או false, findDOMNode מחזיר null. כאשר רכיב מעובד למחרוזת, findDOMNode מחזיר צומת DOM של טקסט המכיל את הערך הזה. הרכיב יכול להחזיר קטע עם מספר ילדים במקרה findDOMNode החזיר את צומת ה-DOM המתאים לילד הראשון שאינו ריק.

הערה:

findDOMNode פועל רק על רכיבים רכובים (כלומר, רכיבים שהוצבו ב-DOM). אם תנסה לקרוא לזה על רכיב שעדיין לא הותקן (כגון קריאה ל-findDOMNode() ב-render() ברכיב שעדיין לא נוצר), ייגרם חריג.

לא ניתן להשתמש ב-findDOMNode ברכיבי פונקציה.

רכיבי DOM

React מיישמת מערכת DOM בלתי תלויה בדפדפן לביצועים ועם תאימות בין דפדפנים. אנו מנצלים הזדמנות זו כדי לנקות חלק מהקצוות הגסים ביישום ה-DOM של הדפדפן.

ב-React, כל המאפיינים והמאפיינים של ה-DOM (כולל מטפלי אירועים) חייבים להיות ב-camelcase. לדוגמה, התכונה HTML tabindex מתאימה לתכונת tab Index ב-React.

יוצאי הדופן הם התכונות aria-* ו-data-*, שצריכות להיות באותיות קטנות. לדוגמה, אתה יכול לקבל תג שטח כתג ​​שטח.

הבדלים בתכונות

מספר תכונות יפעלו בצורה שונה בין React ל-HTML:

בָּדוּק

התכונה המסומנת נתמכת על ידי רכיבים של תיבת סימון או רדיו מסוג . זה שימושי לייצור רכיבים מבוקרים. אתה יכול להשתמש בזה כדי לקבוע אם הרכיב מסומן או לא.

DefaultChecked הוא המקביל הלא מסומן שקובע שהרכיב נבדק בפעם הראשונה שהוא מותקן.

className

כדי לציין את מחלקת ה-CSS, השתמש בתכונה className. זה חל על כל רכיבי DOM ו-SVG רגילים כמו , , וכו.

אם אתה משתמש ב-React with Web Components (לא שכיח), השתמש במקום זאת בתכונת class.

מסוכן SetInnerHTML

מסוכן SetInnerHTML הוא התחליף של React לשימוש ב-innerHTML בדפדפן DOM. הגדרת קוד HTML היא מסוכנת מכיוון שקל לחשוף את המשתמשים להתקפת סקריפטים בין-אתרים (XSS).

c# datetime

אז אנחנו יכולים להגדיר HTML ישירות מ-React, אבל אתה צריך להקליד בצורה מסוכנת SetInnerHTML ולהעביר אובייקט עם מפתח __html כדי לזכור שזה מסוכן.

לדוגמה:

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

רכיבי React משתמשים ב-htmlFor במקום זאת, שכן for היא מילה שמורה ב-JavaScript.

בשינוי

אירוע onChange מתנהג כצפוי; האירוע מופעל בכל פעם ששדה טופס משתנה.

אנחנו בכוונה לא משתמשים בהתנהגות הדפדפן הקיימת מכיוון שהשינוי גדול בהתנהגותו וראקט מסתמך על האירוע כדי לטפל בקלט המשתמש בזמן אמת.

נבחר

אם ברצונך לסמן את הערך כנבחר, עיין בערך של אפשרות זו בערך 's במקום זאת. ראה 'בחר תג' להנחיות מפורטות.

הערה:

במקרים מקסימליים, שמות מחלקות מתייחסים למחלקות המוגדרות בגיליון סגנונות CSS חיצוני. סגנונות משמשים באפליקציות React כדי להוסיף סגנונות מחושבים בזמן רינדור. תכונת הסגנון מקבלת את אובייקט JavaScript עם מאפייני גמל במקום מחרוזת CSS.

זה תואם בסגנון DOM מאפייני JavaScript, יעיל יותר ונמנע 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 בצד השרת, זו אזהרה כאשר השרת והלקוח מעבדים עם תוכן שונה. עם זאת, קשה להבטיח התאמה מדויקת במקרים נדירים. לדוגמה, חותמות זמן צפויות להיות שונות בשרת או בלקוח.

אם תגדיר את אזהרת ההדחקה כ-true, היא לא תזהיר על אי התאמה בין התכונות והתוכן של האלמנט.

זה עבד רק בעומק מפלס אחד ונועד לשמש כמפלט.

ערך

תכונת הערך מתוכננת על ידי הרכיבים , ו. אתה יכול להשתמש בו כדי להגדיר את הערך של הרכיב.

זה שימושי לייצור רכיבים מבוקרים. defaultValue ושווה לבלתי מסומן מגדירים את ערך הרכיב כאשר הוא מותקן באופן סדרתי.

כל תכונות ה-HTML הנתמכות

כל תכונת DOM מותאמת אישית וסטנדרטית נתמכת.

React סיפקה API ממוקד 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