مكوّنات الأصناف في React: الحالة ودورة الحياة والتحويل

مكوّن الصنف صنف JavaScript يرث React.Component ويُرجع JSX من تابع render(). يقرأ props من this.props، ويحتفظ بالحالة في this.state، ويحدّثها بـ this.setState(). حلّت مكوّنات الدوال مع الخطافات محلها في الكود الجديد، لكن الأصناف ما زالت مدعومة بالكامل، وتظهر في مشاريع قديمة كثيرة، وهي الطريقة الوحيدة لكتابة حدود أخطاء.

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

يحتفظ كل عدّاد بحالته الخاصة. أضف <Counter label="Plums" /> ثالثًا فيبدأ من 0 أيضًا.

بنية مكوّن الصنف

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

• يرث الصنف Component (أو React.Component مع import React from 'react').
• render() مطلوب. ويجب أن يكون نقيًا، مثل جسم مكوّن الدالة: يقرأ this.props وthis.state، ويُرجع JSX.
• تحمل this.props الـ props. وهي للقراءة فقط.
• يمكن ضبط الحالة في constructor (استدعِ super(props) أولًا) أو، وهو الأشيع اليوم، كحقل صنف: state = { visits: 1 };.
• ما زالت static defaultProps تعمل للأصناف في React 19 (لم تُحذف إلا من مكوّنات الدوال).

this.setState يدمج، ويمكنه أخذ دالة تحديث

يفعل setState أمرين بشكل مختلف عن دالة الضبط في useState. فهو يدمج الكائن الذي تمرره في الحالة الحالية، فلا تحدّث إلا المفاتيح التي تسميها. ومثل كل تحديث حالة في React، لا يُطبَّق فورًا، فاستخدم صيغة دالة التحديث عندما تعتمد القيمة التالية على السابقة.

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 بعد التحديث، وتُظهر وحدة التحكم العنوان الجديد هناك.

ربط معالجات الأحداث

التابع الممرر على شكل 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. ويعمل الثاني، لأن الدالة السهمية في حقل صنف تلتقط this عند إنشاء النسخة. والإصلاح الأقدم، الذي ما زال شائعًا في الكود القديم، يربط في المُنشئ:

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

وتعمل أيضًا دالة سهمية مضمّنة، onClick={() => this.handleClick()}.

توابع دورة الحياة

تستجيب الأصناف للتركيب والتحديث والإزالة عبر توابع بأسماء ثابتة. وأكثر ما ستراه منها:

• componentDidMount(): بعد أن يكون العرض الأول في DOM. ابدأ المؤقتات والاشتراكات والطلبات.
• componentDidUpdate(prevProps, prevState): بعد كل تحديث. قارن بالقيم السابقة قبل أداء أي عمل، وإلا دخلت في حلقة.
• componentWillUnmount(): قبل الإزالة. ألغِ ما بدأه componentDidMount.
• shouldComponentUpdate(nextProps, nextState): أرجع false لتتخطى عرضًا.

في صفحة دورة حياة المكوّن القائمة الكاملة، وترتيب تشغيلها، ومكوّن يسجّل كل واحد منها.

تحويل صنف إلى مكوّن دالة

إليك صنفًا يستخدم توابع دورة الحياة الثلاثة الشائعة. ينبض كل ثانية، ويسجّل عندما تتغير الـ 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>
    );
}

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

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

يعدّ المؤقتان بالطريقة نفسها ويسجّلان مع كل تغيير للتسمية. وتسجّل نسخة الدالة أيضًا مرة عند التركيب، لأن التأثير يعمل بعد العرض الأول كذلك. خطوات أي تحويل:

1. يصبح this.props.x prop مفككة، { x }.
2. يصبح كل مفتاح في this.state استدعاء useState خاصًا به. وتذكّر أن دالة الضبط تستبدل ولا تدمج.
3. تصبح التوابع دوال عادية داخل المكوّن. لا حاجة إلى الربط.
4. تصبح componentDidMount وcomponentDidUpdate وcomponentWillUnmount استدعاءات useEffect، مجمّعة بحسب ما تفعله لا بحسب وقت تشغيلها.
5. يصبح createRef هو useRef، ويصبح static contextType مع this.context هو useContext أو use.

اترك حدود الأخطاء أصنافًا؛ فلا مقابل لها في الدوال.

PureComponent

يُعرض مكوّن الصنف العادي في كل مرة يُعرض فيها أبوه. أما PureComponent فيقارن أولًا props والحالة الجديدة بالسابقة، بعمق مستوى واحد، ويتخطى العرض عندما لا يتغير شيء. وهو نظير الأصناف لـ 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 من الأصناف

إذا كنت تصون كود أصناف قديمًا، فبعض الأنماط لم تعد تعمل في React 19:

• مراجع النصوص (ref="input" مع this.refs.input). استخدم createRef() أو دالة مرجع.
• السياق القديم (contextTypes وchildContextTypes وgetChildContext). استخدم createContext مع static contextType.
• propTypes تُتجاهل. استخدم TypeScript أو فحوصك الخاصة.
• findDOMNode زال. ضع مرجعًا على عنصر DOM بدلًا منه.

والتوابع القديمة componentWillMount وcomponentWillReceiveProps وcomponentWillUpdate قديمة هي الأخرى. ما زالت تعمل، بالأسماء القديمة وبأسماء UNSAFE_ (UNSAFE_componentWillMount وما شابه)، لكنها مُهملة ويحذّر منها StrictMode؛ انقل كودها إلى componentDidMount أو componentDidUpdate أو getDerivedStateFromProps.