ReactDOM
אם אתם טוענים את React מתגית <script>, ה-APIs מהרמה העליונה הבאים זמינים תחת המשתנה הגלובלי ReactDOM. אם אתם משתמשים ב-ES6 עם npm, אתם יכולים לכתוב import ReactDOM from 'react-dom'. אם אתם משתמשים ב-ES5 עם npm, תוכלו לכתוב var ReactDOM = require('react-dom').
סקירה כללית
החבילה react-dom מספקת מתודות ספציפיות ל-DOM שניתן להשתמש בהן ברמה העליונה של האפליקציה שלכם וכפתח מילוט כדי להגיע אל מחוץ למודל React אם יש לכם צורך בכך. לרוב הקומפוננטות שלכם לא אמור להיות צורך להשתמש במודול זה.
תמיכה בדפדפנים
React תומכת בכל הדפדפנים הפופולריים, כולל Internet Explorer 9 ומעלה, אם כי כמה polyfills נדרשים עבור דפדפנים ישנים יותר כגון IE 9 ו-IE 10.
הערה
אנו לא תומכים בדפדפנים ישנים יותר שאינם תומכים במתודות ES5, אך ייתכן שתגלו שהאפליקציות שלכם פועלות בדפדפנים ישנים יותר אם תכללו בעמוד polyfills כגון es5-shim ו- es5-sham. אתם לבדכם במערכה אם תבחרו לקחת את הנתיב הזה.
סימוכין
render()
ReactDOM.render(element, container[, callback])מרנדרת אלמנטי React לתוך ה-DOM ב-container שסופק ומחזירה הפנייה (reference) לקומפוננטה (או מחזירה null עבור קומפוננטות חסרות state).
אם קומפוננטת ה-React רונדרה קודם לכן ל-container, פעולה זו תבצע עדכון עבורה ורק תשנה את ה-DOM לפי הצורך כדי לשקף את אלמנט ה-React האחרון.
אם ארגומנט ה-callback האופציונלי מסופק, הוא יורץ לאחר שהקומפוננטה רונדרה או עודכנה.
הערה:
ReactDOM.render()שולטת בתוכן של הצומת המכיל שאתם מעבירים. כל אלמנטי ה-DOM הקיימים בתוכו מוחלפים בקריאה הראשונה. קריאות מאוחרות יותר משתמשות באלגוריתם הבדלת ה-DOM של React לביצוע עדכונים יעילים.
ReactDOM.render()לא משנה את הצומת המכיל (רק משנה את הילדים של המכיל). ייתכן שיהיה אפשר להכניס קומפוננטה לצומת DOM קיים מבלי לדרוס את הילדים הקיימים.
ReactDOM.render()כרגע מחזירה הפניה למופע השורשReactComponent. עם זאת, שימוש בערך מוחזר זה הוא שאריות מורשת ויש להימנע מכך משום שגירסאות עתידיות של React עשויות לרנדר קומפוננטות באופן אסינכרוני במקרים מסוימים. אם אתם צריכים התייחסות למופע השורשReactComponent, הפתרון המועדף הוא לצרף הפנייה ל-callback לאלמנט השורש.שימוש ב-
ReactDOM.render()כדי לנקות תוכן אלמנט שנשלח על-ידי השרת הוצא משימוש והאפשרות תוסר ב-React 17. השתמשו ב-hydrate()במקום.
hydrate()
ReactDOM.hydrate(element, container[, callback])כמו render(), אבל משמשת לניקוי של צומת מכיל שתוכן ה-HTML שלו רונדר על-ידי ReactDOMServer. React תנסה לצרף מנהלי אירועים ל-markup הקיים.
React מצפה שהתוכן המרונדר יהיה זהה בין השרת לבין הלקוח. היא יכולה לתקן את ההבדלים בתוכן טקסט, אבל אתם צריכים לטפל באי-התאמות כפי שאתם מטפלים בבאגים ולתקן אותם. במצב פיתוח, React מזהירה מפני אי התאמות במהלך הניקוי. אין הבטחות כי הבדלי מאפיינים יתוקנו במקרה של אי-התאמה. זה חשוב מסיבות של ביצועים כי ברוב האפליקציות, אי-התאמות הן דבר נדיר, ולכן אימות כל ה-markup יהיה יקר מדי כך שנרצה להמנע ממנו.
אם מאפיין או תוכן טקסט של אלמנט בודד שונה באופן בלתי נמנע בין השרת לבין הלקוח (לדוגמה, חותמת זמן), תוכלו להשתיק את האזהרה על ידי הוספת suppressHydrationWarning={true} לאלמנט. זה עובד רק עבור רמת עומק אחת, ונועד להיות רק כפתח מילוט. אל תשתמשו בזה יותר מדי. אלא אם כן מדובר בתוכן טקסט, React עדיין לא תנסה לתקן אותו, לכן ייתכן שהוא יישאר בלתי עקבי עד לעדכונים עתידיים.
אם אתם בכוונה צריכים לרנדר משהו שונה בצד השרת ובצד הלקוח, אתם יכולים לבצע רינדור בשני מעברים. קומפוננטות המרנדרות משהו אחר בצד הלקוח יכולות לקרוא משתנה מה-state כמו this.state.isClient, שאותו תוכלו להגדיר ל-true ב-componentDidMount(). בדרך זו מעבר הרינדור הראשוני ירנדר את אותו תוכן כמו השרת, תוך הימנעות מאי-התאמות, אבל מעבר נוסף יקרה באופן סינכרוני מיד לאחר הניקוי. שימו לב כי גישה זו תהפוך את הקומפוננטות שלכם לאיטיות יותר כי הן צריכות להתרנדר פעמיים, אז השתמשו בה בזהירות.
זכרו להיות מודעים לחוויית המשתמש על חיבורים איטיים. קוד ה-JavaScript עלול להטען מאוחר יותר באופן משמעותי מאשר רינדור ה-HTML הראשוני, כך שאם אתם מרנדרים משהו שונה ברינדור אצל הלקוח בלבד, המעבר יכול להיות צורם. עם זאת, אם מבוצע היטב, זה עשוי להיות מועיל לרנדר “מעטפת” של האפליקציה בשרת, ורק להראות כמה ווידג’טים נוספים אצל הלקוח. כדי ללמוד כיצד לעשות זאת מבלי לקבל בעיות אי-ההתאמה ב-markup, עיינו בהסבר בפסקה הקודמת.
unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)מסירה קומפונטה React מתופעלת מה-DOM ומנקה את מנהלי האירועים ואת ה-state. אם הקומפוננטה לא הופעלה על ה-container, קריאה לפונקציה זו אינה עושה דבר. מחזירה true אם ביטול תפעול הקומפוננטה צלח ו-false אם לא היתה קומפוננטה כדי לבטל את הפעלתה.
findDOMNode()
הערה:
findDOMNodeהיא פתח מילוט המשמשת כדי לגשת לצומת ה-DOM הבסיסי. ברוב המקרים, שימוש בפתח מילוט זה הוא לא מומלץ מכיוון שזה חודר את האבסטרקציה של הקומפוננטה. היא הוצאה משימוש ב-StrictMode.
ReactDOM.findDOMNode(component)אם קומפוננטה זו כבר הופעלה לתוך ה-DOM, קריאה זו מחזירה את אלמנט ה-DOM התואם המקורי של הדפדפן. מתודה זו שימושית עבור קריאת ערכים מתוך ה-DOM, כגון ערכי שדות טופס וביצוע מדידות DOM. ברוב המקרים, ניתן לצרף הפנייה לצומת DOM ולהימנע לגמרי משימוש ב-findDOMNode.
כאשר קומפוננטה מרונדרת ל-null או false, findDOMNode מחזירה null. כאשר קומפוננטה מרונדרת למחרוזת, findDOMNode מחזירה צומת DOM מסוג טקסט המכילה את הערך. החל מ-React 16, קומפוננטה יכולה להחזיר קטע עם מספר ילדים, ובמקרה כזה findDOMNode תחזיר את צומת ה-DOM התואם לילד הראשון שאינו ריק.
הערה:
findDOMNodeעובדת רק על קומפוננטות שהופעלו (כלומר, קומפוננטות שכבר הוכנסו ל-DOM). אם אתם מנסים לקרוא לה על קומפוננטות שעדיין לא הופעלו (כמו קריאה ל-findDOMNode()מתוךrender()על קומפוננטה שעדיין לא נוצרה) תזרק שגיאה.
findDOMNodeלא יכולה להקרא על קומפוננטות פונקציה.
createPortal()
ReactDOM.createPortal(child, container)מייצרת פורטל. פורטלים מספקים דרך לרנדר ילדים לתוך צומת DOM שקיים מחוץ להיררכיה של קומפוננטת ה-DOM.