render

Deprecated

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

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

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

render(reactNode, domNode, callback?)

Reference
- render(reactNode, domNode, callback?)
שימוש

Reference

`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 לפי הצורך.

ראו דוגמאות נוספות בהמשך.

Parameters

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

Returns

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

Caveats

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

שימוש

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

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.

רינדור כמה roots

אם העמוד שלכם לא בנוי כולו ב-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 node. כל עוד מבנה עץ הקומפוננטות תואם למה שרונדר קודם, 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