دورة حياة المكوّن في React: التركيب والتحديث والإزالة

لدورة حياة مكوّن React ثلاث مراحل: التركيب (يظهر المكوّن على الشاشة لأول مرة)، والتحديث (يُعرض من جديد لأن حالته أو props أو السياق تغيّر)، والإزالة (يُحذف). في مكوّنات الدوال تستجيب لهذه المراحل بـ useEffect: التأثير ذو [] يعمل بعد التركيب، والتأثير ذو الاعتماديات يعمل بعد التحديثات التي تغيّرت فيها، والدالة التي يُرجعها التأثير تعمل عند الإزالة.

تُظهر وحدة التحكم أسفل المعاينة كل مرحلة لحظة حدوثها.

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، لأن الحالة رُميت مع المكوّن.

التركيب

يُركَّب المكوّن في أول مرة تعرضه فيها React في موضع معين من الشجرة. تستدعي React الدالة، وتنشئ عقد DOM من JSX التي تُرجعها، وتدرجها، وتترك المتصفح يرسم، ثم تشغّل تأثيرات المكوّن.

useEffect(fn, []) هو المكان الذي تبدأ فيه الأشياء التي ينبغي أن تبقى ما دام المكوّن على الشاشة: اشتراك، أو مؤقت، أو اتصال، أو طلب بيانات أول. يعمل بعد الرسم، فلا يؤخر الإطار الأول أبدًا.

التحديث

يتحدث المكوّن (يُعرض من جديد) عندما:

• تتغير حالته الخاصة،
• يُعرض أبوه من جديد (افتراضيًا، يُعرض كل ابن أيضًا، سواء تغيّرت props الخاصة به أم لا)،
• يتغير سياق يقرؤه.

بعد كل تحديث، تشغّل React التأثيرات التي تغيّرت اعتمادياتها. وقبل تشغيل تأثير من جديد، تشغّل دالة التنظيف السابقة لذلك التأثير، فيُغلق الاشتراك القديم قبل أن يُفتح الجديد. تتناول صفحة العرض ما يطلق العرض بتفصيل أكبر.

الإزالة

يُزال المكوّن عندما يتوقف أبوه عن عرضه (كما يفعل {show && <Counter />} أعلاه)، أو عندما يتغير key الخاص به، أو عندما يُزال الجذر نفسه. تحذف React عقد DOM الخاصة به، وتشغّل دالة تنظيف كل تأثير، وترمي حالته. وإذا ظهر المكوّن مرة أخرى لاحقًا، فهو نسخة جديدة تمامًا.

الآباء والأبناء

تعرض React من الأعلى إلى الأسفل لكنها تشغّل التأثيرات من الأسفل إلى الأعلى. عندما يُركَّب أب وابن معًا، تعمل تأثيرات الابن أولًا، فيستطيع تأثير الأب الاعتماد على أن أبناءه مُعدّون بالكامل.

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>
    );
}

يسجّل التركيب render Parent وrender Child وChild effect وParent effect. اضغط Remove فتعمل دوال التنظيف بالعكس: Parent cleanup، ثم Child cleanup.

مرحلتا العرض والإثبات

يمر كل تحديث بمرحلتين:

1. مرحلة العرض. تستدعي React مكوّناتك لتحسب JSX الجديدة وتقارنها بالنتيجة السابقة. لا يتغير شيء على الشاشة بعد. قد توقف React هذا العمل مؤقتًا، أو تشغّله مرتين في StrictMode، أو ترميه، ولهذا يجب أن يكون العرض نقيًا: لا طلبات، ولا اشتراكات، ولا تغييرات في متغيرات خارجية.
2. مرحلة الإثبات. تطبّق React الفروق على DOM، وتربط المراجع، وتشغّل دوال useLayoutEffect، كل ذلك قبل أن يرسم المتصفح. تعمل دوال useEffect بعد ذلك، عادة بعد أن يرسم المتصفح. وعندما يكون التحديث قد نتج عن نقرة أو إدخال منفصل آخر، تشغّلها React مباشرة بعد تأثيرات التخطيط بدلًا من ذلك، فتكون النتيجة جاهزة قبل الحدث التالي.

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>;
}

كل نقرة تسجّل الأسطر الثلاثة بالترتيب نفسه. ليس لهذه التأثيرات مصفوفة اعتماديات، فتعمل بعد كل عرض. أضف [] كوسيط ثانٍ إلى كليهما فلا يعملان إلا بعد العرض الأول.

توابع دورة الحياة في الأصناف وما يقابلها من الخطافات

تكتب مكوّنات الأصناف دورة الحياة كتوابع مسماة. ستصادفها في الكود الأقدم وفي حدود الأخطاء، التي ما زالت تحتاج إلى صنف.

إليك صنفًا يسجّل كل تابع أثناء تشغيله:

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>
    );
}

يسجّل التركيب constructor وgetDerivedStateFromProps وrender وcomponentDidMount. وتسجّل النقرة getDerivedStateFromProps وshouldComponentUpdate وrender وgetSnapshotBeforeUpdate وcomponentDidUpdate. اجعل shouldComponentUpdate يُرجع false فتتوقف النقرات عن تحديث الزر: تتغير الحالة، لكن React تتخطى العرض. تُظهر صفحة مكوّنات الأصناف كيف تحوّل صنفًا كهذا إلى دالة.

فكّر بالمزامنة لا بدورة الحياة

جدول الخطافات مفيد لقراءة الكود القديم، لكنه قد يقودك إلى كتابة تأثيرات تنسخ عادات الأصناف، مثل تأثير «تم التركيب» كبير واحد وتأثير «تم التحديث» كبير واحد. الأفضل أن تقرأ التأثير على أنه «أبقِ هذا الشيء الخارجي متزامنًا مع هذه القيم»: اتصل بـ roomId، وعندما يتغير roomId، اقطع الاتصال واتصل من جديد. اكتب تأثيرًا واحدًا لكل شيء تزامنه، واسرد القيم التي يستخدمها كاعتماديات، ودع React تقرر متى تشغّله.