מחזור החיים של קומפוננטה ב-React: mount, עדכון, unmount

למחזור החיים של קומפוננטת React יש שלושה שלבים: mounting (הקומפוננטה מופיעה על המסך בפעם הראשונה), עדכון (היא מתרנדרת שוב כי ה-state, ה-props או הקונטקסט שלה השתנו) ו-unmounting (היא מוסרת). בקומפוננטות פונקציה מגיבים לשלבים האלה עם useEffect: אפקט עם [] רץ אחרי ה-mount, אפקט עם תלויות רץ אחרי עדכונים שבהם הן השתנו, והפונקציה שאפקט מחזיר רצה ב-unmount.

הקונסול מתחת לתצוגה המקדימה מציג כל שלב כשהוא קורה.

import { useEffect, useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    console.log('render, count =', count);

    useEffect(() => {
        console.log('mounted');
        return () => console.log('unmounted');
    }, []);

    useEffect(() => {
        if (count > 0) console.log('updated, count =', count);
    }, [count]);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            {show && <Counter />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>
                {show ? 'Unmount' : 'Mount'} the counter
            </button>
        </div>
    );
}

הקונסול מתחיל ב-render, count = 0 וב-mounted. כל לחיצה על Count רושמת רינדור ועדכון. Unmount רושם unmounted; Mount again מתחיל מחדש מ-count = 0, כי ה-state נזרק יחד עם הקומפוננטה.

mounting

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

useEffect(fn, []) הוא המקום להתחיל דברים שצריכים להתקיים כל עוד הקומפוננטה על המסך: מנוי, טיימר, חיבור, בקשת נתונים ראשונה. הוא רץ אחרי הציור, ולכן הוא אף פעם לא מעכב את הפריים הראשון.

עדכון

קומפוננטה מתעדכנת (מתרנדרת שוב) כש:

• ה-state שלה משתנה,
• ההורה שלה מתרנדר שוב (כברירת מחדל, כל ילד מתרנדר גם הוא, בין אם ה-props שלו השתנו ובין אם לא),
• קונטקסט שהיא קוראת משתנה.

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

unmounting

קומפוננטה עושה unmount כשההורה שלה מפסיק לרנדר אותה (כמו ש-{show && <Counter />} עושה למעלה), כשה-key שלה משתנה, או כשה-root עצמו עושה unmount. React מסירה את צמתי ה-DOM שלה, מריצה את ה-cleanup של כל אפקט, וזורקת את ה-state שלה. אם הקומפוננטה מופיעה שוב מאוחר יותר, זה מופע חדש לגמרי.

הורים וילדים

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

import { useEffect, useState } from 'react';

function Child() {
    console.log('render Child');
    useEffect(() => {
        console.log('Child effect');
        return () => console.log('Child cleanup');
    }, []);
    return <p>I am the child.</p>;
}

function Parent() {
    console.log('render Parent');
    useEffect(() => {
        console.log('Parent effect');
        return () => console.log('Parent cleanup');
    }, []);
    return <Child />;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Remove' : 'Add'} both</button>
            {show && <Parent />}
        </div>
    );
}

ה-mount רושם render Parent, render Child, Child effect, Parent effect. לחצו על Remove וה-cleanups רצים בסדר ההפוך: Parent cleanup, ואז Child cleanup.

שלבי render ו-commit

כל עדכון עובר שני שלבים:

1. שלב ה-render. React קוראת לקומפוננטות שלכם כדי לחשב את ה-JSX החדש ומשווה אותו לתוצאה הקודמת. שום דבר על המסך עוד לא משתנה. React עשויה לעצור את העבודה הזו, להריץ אותה פעמיים ב-StrictMode, או לזרוק אותה, ולכן הרינדור חייב להיות טהור: בלי בקשות, בלי מנויים, בלי שינויים במשתנים חיצוניים.
2. שלב ה-commit. React מחילה את ההבדלים על ה-DOM, מחברת refs, ומריצה callbacks של useLayoutEffect, הכל לפני שהדפדפן מצייר. callbacks של useEffect רצים אחרי זה, בדרך כלל אחרי שהדפדפן צייר. כשלחיצה או קלט בדיד אחר גרמו לעדכון, React מריצה אותם במקום זאת מיד אחרי ה-layout effects, כך שהתוצאה מוכנה לפני האירוע הבא.

import { useEffect, useLayoutEffect, useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    console.log('1. render phase: computing JSX for', count);

    useLayoutEffect(() => {
        console.log('2. commit phase: layout effect, DOM updated, not painted yet');
    });

    useEffect(() => {
        console.log('3. effect: after the commit');
    });

    return <button onClick={() => setCount(count + 1)}>Render again ({count})</button>;
}

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

מתודות מחזור החיים של class והמקבילות שלהן בהוקים

קומפוננטות class מפרטות את מחזור החיים כמתודות עם שם. תפגשו אותן בקוד ישן וב-error boundaries, שעדיין צריכים class.

הנה class שרושם כל מתודה כשהיא רצה:

import { Component, useState } from 'react';

class Logger extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        console.log('constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps');
        return null;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate');
        return null;
    }
    componentDidMount() {
        console.log('componentDidMount');
    }
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    render() {
        console.log('render');
        return <button onClick={() => this.setState({ clicks: this.state.clicks + 1 })}>Clicks: {this.state.clicks}</button>;
    }
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Logger />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>Toggle</button>
        </div>
    );
}

mounting רושם constructor, getDerivedStateFromProps, render, componentDidMount. לחיצה רושמת getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate. גרמו ל-shouldComponentUpdate להחזיר false ולחיצות מפסיקות לעדכן את הכפתור: ה-state משתנה, אבל React מדלגת על הרינדור. הדף על קומפוננטות class מראה איך ממירים class כזה לפונקציה.

חשבו במונחים של סנכרון, לא מחזור חיים

טבלת ההוקים שימושית לקריאת קוד ישן, אבל היא יכולה להוביל אתכם לכתוב אפקטים שמעתיקים הרגלים של class, כמו אפקט "did mount" גדול אחד ואפקט "did update" גדול אחד. עדיף לקרוא אפקט כ-"שמור את הדבר החיצוני הזה מסונכרן עם הערכים האלה": התחבר ל-roomId, וכש-roomId משתנה, התנתק והתחבר שוב. כתבו אפקט אחד לכל דבר שאתם מסנכרנים, רשמו את הערכים שהוא משתמש בהם כתלויות, ותנו ל-React להחליט מתי להריץ אותו.