לְדַקלֵם

Deprecated

ה-API הזה יוסר בגרסה ראשית עתידית של React.

ב-React 18, render הוחלפה ב-createRoot. שימוש ב-render ב-React 18 יציג אזהרה שהאפליקציה שלכם תתנהג כאילו היא רצה על React 17 כאן.

render מרנדרת חתיכת JSX (“React node”) לתוך DOM node של דפדפן.

render(reactNode, domNode, callback?)

הפניה
- render(reactNode, domNode, callback?)
שימוש

הפניה

`render(reactNode, domNode, callback?)`

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

import { render } from 'react-dom';

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

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

אפליקציה שבנויה כולה ב-React לרוב תכלול רק קריאת render אחת עם קומפוננטת השורש שלה. עמוד שמשתמש ב”sprinkles” של React בחלקים שונים עשויים לכלול כמה קריאות render לפי הצורך.

עוד דוגמאות נוספות.

פרמטרים

reactNode: ‏React node שברצונכם להציג. בדרך כלל זו תהיה חתיכת JSX כמו <App />, אבל אפשר גם להעביר React אלמנט עם createElement(), מחרוזת, מספר, null, או undefined.
domNode: אלמנט DOM. React תציג את reactNode שהעברתם בתוך אלמנט ה-DOM הזה. מהרגע הזה React תנהל את ה-DOM בתוך domNode ותעדכןT אותו_6__ ות__תכןT אותו_.
אופציונלי callback: פונקציה. אם הועברה, React תקרא לה אחרי שהקומפוננתה הוכנסה ל-DOM.

מחזירה

render בדרך כלל מחזירה null. עם זאת, אם reactNode שהעברתם היא רכיב כיתה, יוחזר מופע של הקומפוננטה הזו.

אזהרות

ב-React 18, render הוחלפה ב-createRoot. השתמשו ב-createRoot עבור React 18 ומעלה.
בפעם הראשונה שקוראים ל-render, React תנקה את כל התוכן ה-HTML הקיים בתוך domNode רינדור קומפוננטת React לתוכה. אם ה-domNode שלכם מכילה HTML אישית על ידי React בשרת או בזמן בנייה, השתמשו ב-hydrate() במקום, ברת שמח את מטפלי האירועים ל-HTML הקיים.
אם תקראו ל-render על אותו domNode יותר מפעם אחת, React תעדכן את ה-DOM לפי הצורך לשקף את ה-JSX העדכני ביותר שהעברתם. React תחליט אילו חלקים ב-DOM אפשר למחזר כשצריך ליצור מחדש על ידי “התאמה” לעץ שרונדר קודם. קריאה נוספת ל-render על אותו domNode דומה לקריאה ל-פונקציית set בקומפוננטת השורש: React נמנעת מעדכוני DOM מיותרים.
אם האפליקציה שלכם בנויה לגמרי ב-React, כנראה שתהיה בה רק קריאת render אחת. (אם אתם משתמשים ב-framework, הוא יכול לבצע את הקריאה הזו עבורכם.) אתם רוצים לרנדר חתיכת JSX בחלק אחר של עץ ה-DOM שאינו ילד של הקומפוננטה שלכם (מודול אחר או tooltip), השתמשו ב-createPortal ב-__.

שימוש

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

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

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

רינדור קומפונטת השורש

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

Fork

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

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

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

רינדור כמה שורשים

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

Fork

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

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

אפשר להשמיד את העצים שרונדרו עם unmountComponentAtNode().

עדכון העץ המרונדר

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

Fork

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

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

לא נפוץ לקרוא ל-render כמה פעמים. בדרך כלל תעדכנו state בתוך הקומפוננטות במקום.

PreviouspreloadModule

NextunmountComponentAtNode