קומפוננטות React: קומפוננטות פונקציה עם דוגמאות

קומפוננטת React היא פונקציית JavaScript שמחזירה JSX: חלק UI לשימוש חוזר, כמו כפתור, כרטיס או דף שלם. משתמשים בה כמו בתגית HTML, <Profile />, ו-React קוראת לפונקציה כדי לדעת מה לשים על המסך. אפליקציות נבנות על ידי הכנסת קומפוננטות לתוך קומפוננטות אחרות.

function Avatar() {
    return (
        <div
            style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                background: '#c7d2fe',
                display: 'grid',
                placeItems: 'center',
                fontWeight: 'bold',
            }}
        >
            AL
        </div>
    );
}

function Profile() {
    return (
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <Avatar />
            <div>
                <strong>Ada Lovelace</strong>
                <div>Wrote the first published program</div>
            </div>
        </div>
    );
}

export default function App() {
    return (
        <section>
            <h3>Team</h3>
            <Profile />
            <Profile />
        </section>
    );
}

App מרנדרת את Profile פעמיים, וכל Profile מרנדרת Avatar. שנו את ראשי התיבות בתוך Avatar ושני הפרופילים מתעדכנים, כי יש להם הגדרה משותפת אחת. כרגע כל האנשים ברשימה זהים; הדף הבא, props, מראה איך מעבירים לכל עותק נתונים משלו.

כתיבת קומפוננטה

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

1. השם שלה מתחיל באות גדולה: Profile, לא profile.
2. היא מחזירה משהו ש-React יודעת לרנדר: JSX, מחרוזת, מספר, null (לא לרנדר כלום) או מערך של אלה.

function Welcome() {
    return <h1>Welcome back</h1>;
}

// Arrow functions work the same way
const Welcome = () => <h1>Welcome back</h1>;

כשה-JSX משתרע על כמה שורות, עטפו אותו בסוגריים אחרי return. בלעדיהם, return שאחריו ירידת שורה מחזיר undefined, וכל מה שאחריו מתעלמים ממנו.

למה השם חייב להתחיל באות גדולה

JSX מסתכל על האות הראשונה של התגית. אות קטנה פירושה אלמנט HTML מובנה, כך ש-<div> נשאר <div>. אות גדולה פירושה "משתנה שנמצא ב-scope", כך ש-<Profile /> קורא לפונקציה Profile שלכם. תנו לקומפוננטה שם באות קטנה ו-React תיצור במקום זאת אלמנט HTML לא מוכר עם השם הזה:

function Greeting() {
    console.log('Greeting ran');
    return <span>Hello from Greeting</span>;
}

function greeting() {
    console.log('greeting ran');
    return <span>Hello from greeting</span>;
}

export default function App() {
    return (
        <div>
            <p>Capitalized: <Greeting /></p>
            <p>Lowercase: <greeting /></p>
        </div>
    );
}

השורה השנייה מציגה רק את התווית שלה, והקונסול מציג רק Greeting ran. React הכניסה לדף תגית <greeting> ריקה ואף פעם לא קראה לפונקציה עם האות הקטנה. build של פיתוח גם מזהיר ש-The tag <greeting> is unrecognized in this browser; התצוגה המקדימה רצה כמו build של פרודקשן, אז רואים רק את הטקסט החסר. שנו את שם הפונקציה ל-Greetings ואת התגית ל-<Greetings /> כדי לתקן.

הרכבת קומפוננטות

קומפוננטות נועדו להיות מקוננות. דף הוא עץ: App למעלה, אחריה חלקי layout, ואז חלקים קטנים יותר עד כפתורים בודדים. כל קומפוננטה מכירה רק את החלקים שהיא מרנדרת ישירות, כך שאפשר לחשוב על כל אחת בנפרד.

import { useState } from 'react';

function LikeButton() {
    const [liked, setLiked] = useState(false);
    return (
        <button onClick={() => setLiked(!liked)}>
            {liked ? 'Liked' : 'Like'}
        </button>
    );
}

function Post({ title }) {
    return (
        <article style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h4 style={{ margin: '0 0 6px' }}>{title}</h4>
            <LikeButton />
        </article>
    );
}

export default function App() {
    return (
        <main>
            <Post title="Components are functions" />
            <Post title="JSX compiles to function calls" />
            <Post title="State lives in components" />
        </main>
    );
}

לכל LikeButton יש state משלו, כך שלייק לפוסט אחד לא משפיע על האחרים. כדי להוסיף כפתור שיתוף לכל פוסט, כותבים אותו פעם אחת ומוסיפים <ShareButton /> בתוך Post.

מתי לפצל קומפוננטה

אין כלל קבוע, אבל כמה סימנים אומרים שחלק מסוים ראוי לקומפוננטה משלו: אותו markup מופיע בשני מקומות, לקטע ב-JSX יש state משלו (כמו כפתור הלייק שלמעלה), או שהפונקציה התארכה עד שצריך לגלול כדי לראות את ה-return שלה. פיצול לפי הקווים האלה שומר כל קומפוננטה קטנה מספיק כדי לקרוא אותה במסך אחד. פיצול מוקדם מדי עולה מעט: קומפוננטה היא רק פונקציה, ולכן קל לאחד שתיים בחזרה.

ייצוא וייבוא של קומפוננטות

העורכים כאן מכילים קובץ אחד, אבל בפרויקט אמיתי כל קומפוננטה נמצאת בקובץ משלה. לקובץ יכול להיות default export אחד וכל מספר של named exports:

// Avatar.jsx
export default function Avatar({ initials }) {
    return <div className="avatar">{initials}</div>;
}

// Badge.jsx
export function Badge({ label }) {
    return <span className="badge">{label}</span>;
}
export function NewBadge() {
    return <Badge label="new" />;
}

// Profile.jsx
import Avatar from './Avatar.jsx';
import { Badge, NewBadge } from './Badge.jsx';

export default function Profile() {
    return (
        <div>
            <Avatar initials="AL" />
            <Badge label="admin" />
            <NewBadge />
        </div>
    );
}

default export אפשר לייבא בכל שם; named export מייבאים בתוך סוגריים מסולסלים בשם המדויק שלו. צוותים בדרך כלל בוחרים סגנון אחד ונצמדים אליו. שמות הקבצים בדרך כלל תואמים לקומפוננטה: Avatar.jsx מייצא את Avatar.

שמרו על קומפוננטות טהורות

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

import { useState } from 'react';

let guest = 0;

function ImpureCup() {
    guest = guest + 1;
    return <li>Impure cup for guest #{guest}</li>;
}

function PureCup({ number }) {
    return <li>Pure cup for guest #{number}</li>;
}

export default function App() {
    const [renders, setRenders] = useState(1);

    return (
        <div>
            <ul>
                <ImpureCup />
                <ImpureCup />
                <ImpureCup />
            </ul>
            <ul>
                <PureCup number={1} />
                <PureCup number={2} />
                <PureCup number={3} />
            </ul>
            <button onClick={() => setRenders(renders + 1)}>Render again ({renders})</button>
        </div>
    );
}

הכוסות הלא טהורות מתחילות ב-1, 2, 3. לחצו על הכפתור: שום דבר לא השתנה באורחים, ובכל זאת הרשימה הלא טהורה מציגה עכשיו 4, 5, 6, כי כל רינדור הוסיף למשתנה המשותף guest. הכוסות הטהורות מקבלות את המספר שלהן מ-props ונשארות נכונות. בפיתוח, Strict Mode מרנדר כל קומפוננטה פעמיים כדי לחשוף בדיוק באג כזה; התצוגה המקדימה רצה כמו build של פרודקשן, אז כאן הסטייה מופיעה רק כשמרנדרים שוב.

לשנות דברים זה בסדר, רק לא בזמן הרינדור. עדכנו state ב-event handlers, ודברו עם העולם החיצוני (טיימרים, מנויים, כותרת המסמך) באפקטים.

קומפוננטות מול אלמנטים

ה-קומפוננטה היא הפונקציה, Profile. אלמנט הוא מה ש-JSX יוצר כשכותבים <Profile />: אובייקט קטן שאומר "רנדר את Profile עם ה-props האלה". React יוצרת אלמנטים, קוראת לקומפוננטות שהם מציינים, והופכת את התוצאה ל-DOM. אף פעם לא קוראים לקומפוננטה בעצמכם בתור Profile(); כותבים <Profile /> ונותנים ל-React לקרוא לה, כדי שתוכל לעקוב אחרי ה-state שלה ואחרי המקום שלה בעץ.

המקום הזה חשוב. הדוגמה הזו מגדירה קומפוננטה בתוך קומפוננטה אחרת, טעות נפוצה:

import { useState } from 'react';

export default function App() {
    const [clicks, setClicks] = useState(0);

    function NameField() {
        const [text, setText] = useState('');
        return <input value={text} onChange={(e) => setText(e.target.value)} />;
    }

    return (
        <div>
            <NameField />
            <button onClick={() => setClicks(clicks + 1)}>Re-render App ({clicks})</button>
        </div>
    );
}

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

קומפוננטות פונקציה וקומפוננטות class

לפני שהוקים הגיעו ב-React 16.8, קומפוננטות שהיו צריכות state נכתבו כ-classes:

import { Component } from 'react';

class Welcome extends Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

קומפוננטות class עדיין עובדות ב-React 19, ותפגשו אותן בקוד ישן וב-error boundaries, שעדיין דורשים class. קוד חדש משתמש בקומפוננטות פונקציה עם הוקים כמו useState ו-useEffect, שעושים את אותן עבודות עם פחות קוד. הדף על קומפוננטות class ממפה כל יכולת של class להוק המתאים לה.