📚 React Components – המדריך המלא

1. מהו Component ?

Component הוא פונקציית JavaScript שמחזירה JSX. הוא מייצג יחידת-UI עצמאית ולכן ניתן להשתמש בו שוב, לאתר באגים בקלות ולבדוק אותו בבדיקות יחידה.

function Header() {
  return (
    <header>
      <h1>רכיב Header</h1>
    </header>
  );
}

function Main() {
  return (
    <section>
      <p>רכיב Main</p>
    </section>
  );
}

function App() {
  return (
    <div>
      <Header />
      <Main />
    </div>
  );
}

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

2. Properties (`props`)

props הם נתונים חיצוניים שהרכיב מקבל, וכך הופך לדינמי ושימושי במצבים רבים.

function Header(props) {
  return <h1>שלום, {props.name}</h1>;
}

function Main(props) {
  return <p>אנחנו {props.adjective}</p>;
}

function App() {
  return (
    <div>
      <Header name="React Master" />
      <Main adjective="גמישים ומהירים" />
    </div>
  );
}

3. יצירת רשימות + keys

function Main(props) {
  return (
    <ul>
      {props.dishes.map(dish => (
        <li key={dish}>{dish}</li>
      ))}
    </ul>
  );
}

4. הוספת תמונות

ב-Next.js כדאי להשתמש ב-<Image /> לקבלת Lazy-load.

🌐 The Virtual DOM

React יוצר DOM בזיכרון ומשווה אותו לפני עדכון:

React יוצר עותק בזיכרון
מבצע Diff לעומת הקודם
רק שינויים מעודכנים בפועל

מאפשר ביצועים גבוהים גם באתרים גדולים.

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

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

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

כדי לטפל בבעיה זו, אנשי ה-React פיתחו את ה־DOM הווירטואלי.

ב-React, לכל אובייקט DOM ישנו "אובייקט DOM וירטואלי". זהו ייצוג של אובייקט DOM אמיתי – כמו עותק קל.

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

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

זה נשמע לא יעיל להפליא, אך DOM וירטואלי כל כך מהיר שזה לא משמעותי.

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

באמצעות ההשוואה הזו (נקראת diffing), React מגלה בדיוק אילו אלמנטים השתנו, ורק אותם הוא מעדכן ב-DOM האמיתי.

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

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

לסיכום:

כל ה-DOM הווירטואלי מתעדכן
הוא מושווה למה שהיה לפני כן
React מעדכן רק את מה שהשתנה ב-DOM האמיתי
רק אז המסך משתנה בפועל