React/state and lifecycle

سنتحدّث في هذا القسم حول مفهوم حالة ودورة حياة المُكوِّنات في React، بإمكانك أن تجد من هنا مرجعًا مُفصّلًا حول واجهة برمجة التطبيق (API) للمُكوِّنات.

فلنتذكر مثال الساعة من قسم تصيير العناصر في React، تعلّمنا في ذلك القسم فقط طريقة واحدة لتحديث واجهة المستخدم عن طريق استدعاء التابع ReactDOM.render()‎ لتغيير الناتج:

function tick() {
  const element = (
    <div>
      <h1>أهلًا بالعالم!</h1>
      <h2>الساعة الآن {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

جرِّب المثال على موقع CodePen.

سنتعلّم في هذا القسم كيف نجعل مُكوِّن الساعة Clock قابلًا لإعادة الاستخدام حقًّا مع تغليفه ضمن نفسه، حيث يُعيِّن عدّاد الوقت الخاص به ويُحدِّث نفسه في كل ثانية.

بإمكاننا البدء عن طريق تغليف شكل السّاعة:

function Clock(props) {
  return (
    <div>
      <h1>أهلًا بالعالم!</h1>
      <h2>الساعة الآن {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

جرِّب المثال على موقع CodePen.

ولكن على الرغم من ذلك يفتقد هذا المُكوِّن لمتطلب أساسي، وهو أنّ تعيين السّاعة لعدّاد الوقت وتحديثها لواجهة المستخدم في كل ثانية ينبغي أن يكون تفصيلًا داخليًّا خاصًّا بالمُكوِّن Clock.

نريد بشكل مثالي أن نكتب هذه الشيفرة مرة واحدة ونجعل المُكوِّن Clock يُحدِّث نفسه:

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

لتنفيذ هذا نحتاج لإضافة حالة (state) إلى المُكوِّن Clock.

تُشبِه الحالة الخاصيّات props، ولكنّها خاصّة (private) ويتحكَّم فيها المُكوِّن.

أشرنا سابقًا في قسم المُكوِّنات والخاصيّات إلى أنّ المُكوِّنات المُعرَّفة كأصناف تمتلك ميزات إضافيّة، الحالة المحليّة (Local State) واحدة من هذه الميّزات فهي تتوفر فقط للأصناف.

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

بإمكانك تحويل مُكوِّنات الدوال مثل Clock إلى أصناف بخمس خطوات:

1. إنشاء صنف بنفس الاسم والذي يمتد (extends) إلى React.Component.
2. إضافة تابع فارغ وحيد لهذا الصنف اسمه render()‎.
3. نقل جسم الدالة إلى التّابع render()‎.
4. تبديل props إلى this.props في جسم التّابع render()‎.
5. حذف باقي تصريح الدالة الفارغ.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>أهلًا بالعالم!</h1>
        <h2>الساعة الآن {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

جرِّب المثال على موقع CodePen.

أصبح المُكوِّن Clock الآن مُعرَّفًا كصنف بدلًا من دالة.

سيُستدعى التّابع render()‎ في كل مرّة يحصل فيها تحديث، ولكن طالما أنّنا نُصيِّر (Render) العنصر ‎<Clock />‎ إلى نفس عقدة DOM، فستُستخدَم نسخة واحدة فقط من الصنف Clock، يسمح لنا هذا باستخدام ميزات إضافية مثل الحالة المحليّة ودورة حياة المُكوِّنات.

إضافة الحالة المحلية للصنف

سننقل التاريخ date من الخاصيّات props إلى الحالة في ثلاث خطوات:

-أولًا: تبديل this.props.date بـ this.state.date في التّابع render()‎:

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>أهلًا بالعالم!</h1>
        <h2>الساعة الآن {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

-ثانيًا: إضافة دالة بانية للصنف (constructor) والتي تُعيِّن القيمة المبدئية this.state:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>أهلًا بالعالم!</h1>
        <h2>الساعة الآن {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

لاحظ كيف مرّرنا الخاصيّات props إلى الدالة البانية:

constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

ينبغي لمُكوِّنات الأصناف أن تستدعي دومًا الدالة البانية مع الخاصيّات props. -ثالثًا: إزالة الخاصيّة date من العنصر ‎<Clock />‎:

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

سنعيد لاحقًا إضافة شيفرة عداد الوقت إلى المُكوِّن نفسه. تبدو النتيجة كما يلي:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>أهلًا بالعالم!</h1>
        <h2>الساعة الآن {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

جرِّب المثال على موقع CodePen.

سنجعل الآن المُكوِّن Clock يُعيِّن عدّاد الوقت الخاص به ويُحدِّث نفسه في كل ثانية.

إضافة توابع دورة الحياة إلى الصنف

من المهم في التطبيقات التي تمتلك العديد من المُكوِّنات أن نُحرِّر الموارد المحجوزة من قبل هذه المُكوِّنات عند تدميرها.

نريد تعيين عدّاد الوقت حالما يُصيَّر المُكوِّن Clock إلى DOM لأوّل مرّة، يُسمَّى هذا في React بالوصل (mounting). ونرغب أيضًا بمسح هذا العدّاد حالما يُزال DOM الناتج عن المُكوِّن Clock، يُسمَّى هذا في React بالفصل (unmounting).

بإمكاننا التصريح عن توابع خاصّة في مُكوِّنات الأصناف لتنفيذ بعض الشيفرات عند وصل وفصل المُكوِّن:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {
    return (
      <div>
        <h1>أهلًا بالعالم!</h1>
        <h2>الساعة الآن {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

تُدعى هذه التوابع بخُطافات دورة الحياة (lifecycle hooks). يعمل الخُطاف componentDidMount()‎ بعد تصيير ناتج المُكوِّن إلى DOM، لذلك هو مكان مُلائم لتعيين عداد الوقت:

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

لاحظ كيف حفظنا مُعرِّف عدّاد الوقت (timer ID) من خلال this.

لمّا كانت this.props يجري إعدادها عن طريق React نفسها و this.state تمتلك معنًى خاصًّا، فأنت حر بأن تضيف حقول إضافيّة يدويًّا إلى الصّنف إن احتجت تخزين شيء ما لا يُشارِك في تدفّق البيانات (مثل مُعرِّف عداد الوقت).

سننهي عدّاد الوقت في خُطاف دورة الحياة componentWillUnmount()‎:

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

وأخيرًا سنضيف تابعًا يُدعى tick()‎ يُنفِّذه المُكوِّن Clock في كل ثانية. سيستخدم this.setState()‎ لجدولة التحديثات إلى الحالة المحليّة للمُكوِّن:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

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

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>أهلًا بالعالم</h1>
        <h2>الساعة الآن {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

جرِّب المثال على موقع CodePen.

تدق السّاعة الآن في كل ثانية.

فلنوجز بسرعة ما يجري ونذكر الترتيب الذي تُستدعى فيه التوابع:

1. عندما يُمرَّر العنصر ‎<Clock />‎ إلى ReactDOM.render()‎ تستدعي React الدالة البانية للمُكوِّن Clock. وبما أنّ Clock يحتاج لإظهار الوقت الحالي سيُهيِّئ this.state بكائن يتضمّن الوقت الحالي، ولاحقًا يُحدِّث هذه الحالة.
2. تستدعي بعدها React التّابع render()‎ للمُكوِّن Clock، وهكذا تعلم React ما الذي ينبغي عرضه على الشاشة. تُحدِّث React بعد ذلك DOM ليُطابِق ناتج Clock.
3. عندما يُدخَل ناتج Clock إلى DOM، تستدعي React خُطاف دورة الحياة componentDidMount()‎، وبداخله يسأل المُكوِّن Clock المتصفّح أن يُعيِّن عدّاد الوقت لاستدعاء التابع tick()‎ الخاص بالمُكوِّن مرّة كل ثانية.
4. يستدعي المتصفّح في كل ثانية التّابع tick()‎، وبداخل يُجدوِل المُكوِّن Clock تحديثًا لواجهة المستخدم عن طريق استدعاء setState()‎ مع كائن يحوي على الوقت الحالي. وبفضل استدعاء setState()‎ تعلم React أنّ الحالة تغيّرت وبذلك تستدعي التّابع render()‎ مرّة أخرى ليعلم ما الذي ينبغي أن يكون على الشاشة، ستكون this.state.date في التابع render()‎ مختلفة هذه المرّة، وبهذا يتضمّن الناتج الوقت المُحدَّث. تُحدِّث React وفق ذلك DOM.
5. إن أُزيل المُكوِّن Clock من DOM تستدعي React خُطاف دورة الحياة componentWillUnmount()‎ بحيث يتوقّف عدّاد الوقت.