קומפוננטות class ב-React: state, מחזור חיים, המרה

קומפוננטת class היא class של JavaScript שיורשת מ-React.Component ומחזירה JSX ממתודת render(). היא קוראת props מ-this.props, מחזיקה state ב-this.state, ומעדכנת אותו עם this.setState(). קומפוננטות פונקציה עם הוקים החליפו אותן בקוד חדש, אבל classes עדיין נתמכות במלואן, מופיעות בהרבה בסיסי קוד ישנים, והן הדרך היחידה לכתוב error boundary.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

כל מונה שומר state משלו. הוסיפו <Counter label="Plums" /> שלישי וגם הוא מתחיל ב-0.

האנטומיה של קומפוננטת class

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• ה-class יורש מ-Component (או מ-React.Component עם import React from 'react').
• render() הוא חובה. הוא חייב להיות טהור, כמו הגוף של קומפוננטת פונקציה: קוראים את this.props ואת this.state, ומחזירים JSX.
• this.props מחזיק את ה-props. הם לקריאה בלבד.
• אפשר לקבוע state ב-constructor (קודם קוראים ל-super(props)) או, נפוץ יותר היום, כ-class field: state = { visits: 1 };.
• static defaultProps עדיין עובד ב-classes ב-React 19 (הוא הוסר רק מקומפוננטות פונקציה).

this.setState ממזג, ויכול לקבל updater

setState עושה שני דברים אחרת מה-setter של useState. הוא ממזג את האובייקט שמעבירים לתוך ה-state הנוכחי, כך שמעדכנים רק את המפתחות שמציינים. ובנוסף, כמו כל עדכון state ב-React, הוא לא מוחל מיד, אז השתמשו בצורת ה-updater כשהערך הבא תלוי בקודם.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

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

"+3 with objects" מוסיף אחד, כי כל שלוש הקריאות קוראות את אותו this.state.likes. "+3 with updaters" מוסיף שלושה. "Move to Paris" שומר על name ועל likes (המיזוג) אבל מאבד את zip, כי המיזוג הוא ברמה אחת בלבד. כתבו address: { ...this.state.address, city: 'Paris' } כדי לשמור אותו. הארגומנט השני האופציונלי של setState רץ אחרי העדכון, והקונסול מציג שם את הכתובת החדשה.

קשירת event handlers

מתודה שמועברת בתור onClick={this.handleClick} נקראת אחר כך כפונקציה רגילה, בלי האובייקט שלה, ולכן this בתוכה הוא undefined.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

הכפתור הראשון רושם TypeError על קריאת setState של undefined. השני עובד, כי פונקציית חץ ב-class field לוכדת את this כשהמופע נוצר. התיקון הישן יותר, שעדיין נפוץ בקוד legacy, קושר ב-constructor:

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

פונקציית חץ inline, onClick={() => this.handleClick()}, גם עובדת.

מתודות מחזור חיים

classes מגיבות ל-mounting, לעדכון ול-unmounting דרך מתודות עם שמות קבועים. אלה שתראו הכי הרבה:

• componentDidMount(): אחרי שהרינדור הראשון ב-DOM. מתחילים טיימרים, מנויים, בקשות.
• componentDidUpdate(prevProps, prevState): אחרי כל עדכון. השוו לערכים הקודמים לפני שאתם עושים עבודה, אחרת תיכנסו ללולאה.
• componentWillUnmount(): לפני הסרה. מבטלים את מה ש-componentDidMount התחיל.
• shouldComponentUpdate(nextProps, nextState): מחזירים false כדי לדלג על רינדור.

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

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

הנה class שמשתמש בכל שלוש מתודות מחזור החיים הנפוצות. הוא מתקתק כל שנייה, רושם כשה-prop label שלו משתנה, ועוצר את הטיימר שלו כשהוא מוסר.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

ואותה קומפוננטה כפונקציה. כל מתודת מחזור חיים הופכת לחלק מאפקט, ו-setup ו-cleanup קשורים יושבים זה ליד זה במקום בשתי מתודות.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

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

1. this.props.x הופך ל-prop שעובר destructuring, { x }.
2. כל מפתח של this.state הופך ל-useState משלו. זכרו שה-setter מחליף במקום למזג.
3. מתודות הופכות לפונקציות רגילות בתוך הקומפוננטה. לא צריך קשירה.
4. componentDidMount, componentDidUpdate ו-componentWillUnmount הופכים לקריאות useEffect, מקובצות לפי מה שהן עושות ולא לפי מתי הן רצות.
5. createRef הופך ל-useRef, ו-static contextType עם this.context הופכים ל-useContext או ל-use.

השאירו error boundaries כ-classes; אין להם מקבילה בפונקציות.

PureComponent

קומפוננטת class רגילה מתרנדרת בכל פעם שההורה שלה מתרנדר. PureComponent משווה קודם את ה-props וה-state החדשים לקודמים, רמה אחת לעומק, ומדלג על הרינדור כששום דבר לא השתנה. זה המקביל ב-class ל-React.memo.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

לחצו על הכפתור: רק PlainLabel rendered נרשם, כי PureLabel רואה את אותו text. העבירו text={'hello ' + clicks} לשתיהן ושתיהן מתרנדרות בכל לחיצה.

ההשוואה רדודה, ולכן prop שהוא אובייקט או פונקציה חדשים בכל רינדור של ההורה (style={{ color: 'red' }}, onClick={() => ...}) מכשיל אותה. זו אותה מלכודת כמו עם React.memo.

דברים ש-React 19 הסירה מ-classes

אם אתם מתחזקים קוד class ישן, כמה דפוסים כבר לא עובדים ב-React 19:

• string refs (ref="input" עם this.refs.input). השתמשו ב-createRef() או ב-ref callback.
• legacy context (contextTypes, childContextTypes, getChildContext). השתמשו ב-createContext עם static contextType.
• propTypes מתעלמים מהם. השתמשו ב-TypeScript או בבדיקות משלכם.
• findDOMNode נעלם. שימו ref על אלמנט ה-DOM במקום.

גם המתודות הישנות componentWillMount, componentWillReceiveProps ו-componentWillUpdate הן legacy. הן עדיין רצות, גם תחת השמות הישנים וגם תחת שמות ה-UNSAFE_ (UNSAFE_componentWillMount וכן הלאה), אבל הן מיושנות ו-StrictMode מזהיר עליהן; העבירו את הקוד שלהן ל-componentDidMount, componentDidUpdate או getDerivedStateFromProps.