دورة حياة مكوّن React ببساطة

كل مكوّن React يمر بدورة حياة. أحب أن أتخيلها كما تعمل الكائنات الحية: ولادة، وحياة من التحديثات، ثم موت في النهاية. يمنحك React دوال تتصل بكل لحظة من هذه اللحظات.

هذا هو نموذج الـ class components. تغطي الـ Hooks الأمر نفسه اليوم عبر useEffect — لكن فهم دورة الحياة هو ما يجعل هذه الـ Hooks تنسجم في ذهنك.

المراحل الثلاث

Mounting — يُنشأ المكوّن ويُدرج في الـ DOM. Updating — تتغير الـ props أو الـ state فيُعاد عرضه. Unmounting — يُزال من الـ DOM.

render()

render() هي الدالة الوحيدة التي يجب أن يملكها كل class component، ومهمتها الوحيدة وصف الواجهة. تعمل عند الـ mount وعند كل تحديث، فأبقِها pure: بلا آثار جانبية ولا setState ولا استدعاءات API.

componentDidMount()

تُستدعى مرة واحدة، بعد وصول المكوّن إلى الـ DOM مباشرة. هذا هو المكان المناسب لجلب البيانات من endpoint بعيد.

componentDidMount() {
  fetch('/api/user')
    .then((r) => r.json())
    .then((user) => this.setState({ user }));
}

على عكس render()، يُسمح لك باستدعاء setState() هنا. وهو يسبب عرضًا ثانيًا، لكن React يطبّقه قبل أن يرسم المتصفح الشاشة، فلا يرى المستخدم الحالة الوسيطة تومض.

componentDidUpdate()

تعمل بعد كل تحديث — وهي مكان الاستجابة لتغيّر prop أو state، مثل إعادة الجلب عند تغيّر id. المحاذير: إذا استدعيت setState() هنا فيجب أن تحميها بشرط، وإلا بدأت حلقة عرض لانهائية.

componentDidUpdate(prevProps) {
  if (prevProps.userId !== this.props.userId) {
    this.loadUser(this.props.userId);
  }
}

componentWillUnmount()

تُستدعى قبل تدمير المكوّن مباشرة. نفّذ التنظيف هنا — ألغِ المؤقتات، وألغِ الاشتراك في المستمعات، وأوقف الطلبات الجارية. لا تستدعِ setState()؛ فالمكوّن في طريقه إلى الزوال.

ملخص سريع

render() pure وإلزامية. componentDidMount() للتهيئة وأول جلب. componentDidUpdate() تستجيب للتغييرات — احمِ setState بشرط. componentWillUnmount() للتنظيف. وهناك إضافة نادرًا ما ستحتاجها: shouldComponentUpdate()، التي تتيح لك إخبار React بتخطي إعادة عرض لتغيير معين. استخدمها باعتدال، وفقط بعد أن تقيس مشكلة حقيقية.