createRoot מאפשר לך ליצור שורש להצגת רכיבי React בתוך צומת DOM של הדפדפן.

const root = createRoot(domNode, options?)

הפניה

createRoot(domNode, options?)

התקשר ל-createRoot כדי ליצור שורש React להצגת תוכן בתוך אלמנט DOM בדפדפן.

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

React תיצור שורש ל-domNode, וישתלט על ניהול ה-DOM בתוכו. לאחר שיצרת שורש, עליך לקרוא ל-root.render כדי להציג בתוכו רכיב React:

root.render(<App />);

לאפליקציה בנויה במלואה עם React תהיה בדרך כלל רק קריאה אחת createRoot עבור רכיב השורש שלה. דף שuses “מפזרים” של React עבור חלקי הדף עשוי להיות בעל כמה שורשים נפרדים לפי הצורך.

ראה דוגמאות נוספות למטה.

פרמטרים

  • domNode: אלמנט DOM. React יצור שורש עבור אלמנט DOM זה ויאפשר לך לקרוא לפונקציות בשורש, כגון render כדי להציג תוכן React שניתנו.

  • אופציונלי options: אובייקט עם אפשרויות עבור שורש React זה.

  • אופציונלי onRecoverableError: התקשרות חוזרת נקראת כאשר React מתאושש אוטומטית משגיאות.

    • אופציונלי identifierPrefix: קידומת מחרוזת React uses עבור מזהים שנוצרו על ידי useId. שימושי כדי למנוע התנגשויות בעת שימוש במספר שורשים באותו עמוד.

מחזירה

createRoot מחזיר אובייקט בשתי שיטות: render ו-unmount.

אזהרות

  • אם האפליקציה שלך מעובדת בשרת, השימוש ב-createRoot() אינו נתמך. השתמש במקום זאת ב-hydrateRoot().
  • סביר להניח שתהיה לך רק שיחת createRoot אחת באפליקציה שלך. אם אתה use מסגרת, היא עשויה לעשות את הקריאה הזו עבורך.
  • כאשר אתה רוצה לרנדר קטע של JSX בחלק אחר של העץ DOM שאינו צאצא של הרכיב שלך (לדוגמה, מודל או הסבר כלים), use createPortal במקום createRoot

root.render(reactNode)

התקשר ל-root.render כדי להציג קטע של JSX (“צומת React”) לתוך הצומת DOM של הדפדפן React השורש.

root.render(<App />);

React יציג את <App /> ב-root, וישתלט על ניהול ה-DOM שבתוכו.

ראה דוגמאות נוספות למטה.

פרמטרים

  • reactNode: צומת React שברצונך להציג. זה בדרך כלל יהיה חלק של JSX כמו <App />, אבל אתה יכול גם להעביר אלמנט React שנבנה עם createElement(), מחרוזת, מספר, null, או undefined.

מחזירה

root.render מחזירה undefined.

אזהרות

  • בפעם הראשונה שאתה קורא root.render, React ינקה את כל התוכן HTML הקיים בתוך השורש React לפני עיבוד הרכיב React לתוכו.

  • אם הצומת DOM של השורש שלך מכיל HTML שנוצר על ידי React בשרת או במהלך הבנייה, use hydrateRoot() במקום זאת, אשר מצרף את מטפלי האירועים ל-HTML הקיים.

  • אם תתקשר ל-render באותו שורש יותר מפעם אחת, React יעדכן את ה-DOM לפי הצורך כדי לשקף את ה-JSX האחרון שעברת. React יחליט אילו חלקים של DOM ניתן מחדשused ואילו צריך ליצור מחדש על ידי “התאמת אותו” עם העץ שניתנו בעבר. קריאה ל-render על אותו שורש שוב דומה לקריאה לפונקציה set על רכיב השורש: React מונעת עדכוני DOM מיותרים.

root.unmount()

התקשר ל-root.unmount כדי להרוס עץ שעבר עיבוד בתוך שורש React.

root.unmount();

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

זה בעיקר useמלא אם הצומת DOM של השורש React שלך (או כל אחד מאבותיו) עלול להיות מוסר מה-DOM על ידי קוד אחר. לדוגמה, דמיינו חלונית לשונית jQuery שמסירת כרטיסיות לא פעילות מה-DOM. אם כרטיסייה תוסר, כל מה שבתוכה (כולל שורשי React בפנים) יוסר גם מה-DOM. במקרה כזה, עליך לומר ל-React “להפסיק” לנהל את תוכן השורש שהוסר על-ידי קריאה ל-root.unmount. אחרת, הרכיבים בתוך השורש שהוסר לא יידעו לנקות ולפנות משאבים גלובליים כמו מנויים.

קריאה ל-root.unmount תבטל את הטעינה של כל הרכיבים בשורש ו”תנתק” את React מהצומת השורש DOM, כולל הסרת מטפלי אירועים או state בעץ.

פרמטרים

root.unmount אינו מקבל פרמטרים כלשהם.

מחזירה

root.unmount מחזירה undefined.

אזהרות

  • קריאה ל-root.unmount תבטל את כל הרכיבים בעץ ו”תנתק” את React מהצומת השורש DOM.

  • ברגע שאתה קורא ל-root.unmount אינך יכול לקרוא שוב ל-root.render באותו שורש. ניסיון להתקשר ל-root.render על שורש לא מותקן יגרום לשגיאה “לא ניתן לעדכן שורש לא מותקן”. עם זאת, אתה יכול ליצור שורש חדש עבור אותו צומת DOM לאחר ביטול הטעינה של השורש הקודם עבור אותו צומת.

שימוש

עיבוד אפליקציה בנויה במלואה עם React

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

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

בדרך כלל, אתה צריך להפעיל את הקוד הזה רק פעם אחת בעת ההפעלה. זה יהיה:

  1. מצא את צומת הדפדפן DOM המוגדר ב-HTML שלך.
  2. הצג את React רכיב עבור האפליקציה שלך בפנים.
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

אם האפליקציה שלך בנויה במלואה עם React, לא תצטרך ליצור שורשים נוספים, או להתקשר שוב ל-root.render.

מנקודה זו ואילך, React ינהל את ה-DOM של האפליקציה כולה. כדי להוסיף עוד רכיבים, קנן אותם בתוך הרכיב App. כאשר אתה צריך לעדכן את ממשק המשתמש, כל אחד מהרכיבים שלך יכול לעשות זאת על ידי באמצעות state. כאשר אתה צריך להציג תוכן נוסף כמו __t __de, כמו state. זה עם פורטל.](/reference/react-dom/createPortal)

Note

כאשר HTML שלך ריק, ה-user רואה דף ריק עד שקוד ה-JavaScript של האפליקציה נטען ופועל:

<div id="root"></div>

זה יכול להרגיש איטי מאוד! כדי לפתור את זה, אתה יכול ליצור את ה-HTML הראשוני מהרכיבים שלך בשרת או במהלך הבנייה. ואז המבקרים שלך יכולים לקרוא טקסט, לראות תמונות וללחוץ על קישורים לפני טעינת כל אחד מהקוד JavaScript. We recommend using a framework that does this optimization out of the box. Depending on when it runs, this is called server-side rendering (SSR) or static site generation (SSG).

Pitfall

אפליקציות המשתמשות בעיבוד שרת או יצירה סטטית חייבות לקרוא ל-hydrateRoot במקום createRoot. React לאחר מכן ידחה (reuse) את הצמתים DOM מה-HTML שלכם במקום להרוס אותם וליצור מחדש.

עיבוד דף בנוי חלקית עם React

אם הדף שלך לא בנוי במלואו עם React, תוכל להתקשר ל-createRoot מספר פעמים כדי ליצור שורש לכל חלק ברמה העליונה של UI_3 המנוהל על ידי createRoot. אתה יכול להציג תוכן שונה בכל שורש על ידי קריאה ל-root.render.

כאן, שני רכיבי React שונים מעובדים לשני צמתים DOM המוגדרים בקובץ index.html:

import './styles.css';
import { createRoot } from 'react-dom/client';
import { Comments, Navigation } from './Components.js';

const navDomNode = document.getElementById('navigation');
const navRoot = createRoot(navDomNode); 
navRoot.render(<Navigation />);

const commentDomNode = document.getElementById('comments');
const commentRoot = createRoot(commentDomNode); 
commentRoot.render(<Comments />);

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

const domNode = document.createElement('div');
const root = createRoot(domNode); 
root.render(<Comment />);
document.body.appendChild(domNode); // You can add it anywhere in the document

כדי להסיר את עץ React מהצומת DOM ולנקות את כל המשאבים used על ידו, התקשר ל-root.unmount.

root.unmount();

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

עדכון רכיב שורש

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

import { createRoot } from 'react-dom/client';
import './styles.css';
import App from './App.js';

const root = createRoot(document.getElementById('root'));

let i = 0;
setInterval(() => {
  root.render(<App counter={i} />);
  i++;
}, 1000);

זה נדיר להתקשר ל-render מספר פעמים. בדרך כלל, הרכיבים שלך עדכנו את state במקום זאת.

פתרון בעיות

יצרתי שורש, אבל שום דבר לא מוצג

ודא שלא שכחת למעשה לעבד את האפליקציה שלך לשורש:

import { createRoot } from 'react-dom/client';
import App from './App.js';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

עד שתעשה זאת, שום דבר לא מוצג.

אני מקבל שגיאה: “מיכל היעד אינו אלמנט DOM”

שגיאה זו פירושה שכל מה שאתה מעביר ל-createRoot אינו צומת DOM.

אם אינך בטוח מה קורה, נסה לרשום את זה:

const domNode = document.getElementById('root');
console.log(domNode); // ???
const root = createRoot(domNode);
root.render(<App />);

לדוגמה, אם domNode הוא null, זה אומר ש-getElementById החזיר null. זה יקרה אם אין צומת במסמך עם המזהה הנתון בזמן השיחה שלך. עשויות להיות כמה סיבות לכך:

  1. המזהה שאתה מחפש עשוי להיות שונה מהמזהה שציינת בקובץ HTML. בדוק אם יש שגיאות כתיב!
  2. התג <script> של החבילה שלך לא יכול “לראות” שום צמתים של DOM המופיעים אחריו ב-HTML.

דרך נפוצה נוספת לקבל שגיאה זו היא לכתוב createRoot(<App />) במקום createRoot(domNode).

אני מקבל הודעת שגיאה: “הפונקציות אינן תקפות כילד React.”

שגיאה זו פירושה שכל מה שאתה מעביר ל-root.render אינו רכיב React.

זה עלול לקרות אם תתקשר ל-root.render עם Component במקום <Component />:

// 🚩 Wrong: App is a function, not a Component.
root.render(App);

// ✅ Correct: <App /> is a component.
root.render(<App />);

או אם תעביר פונקציה ל-root.render, במקום התוצאה של קריאה לה:

// 🚩 Wrong: createApp is a function, not a component.
root.render(createApp);

// ✅ Correct: call createApp to return a component.
root.render(createApp());

השרת שלי HTML שבוצע מחדש נוצר מחדש מאפס

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

אפליקציות המעובדות על ידי שרת חייבות להיות use hydrateRoot במקום createRoot:

import { hydrateRoot } from 'react-dom/client';
import App from './App.js';

hydrateRoot(
  document.getElementById('root'),
  <App />
);

שימו לב שה-API שלו שונה. בפרט, בדרך כלל לא תהיה שיחת root.render נוספת.

PreviousClient APIs
NexthydrateRoot

How do you like these docs?