عرض مصدر React/state and lifecycle

<noinclude>{{DISPLAYTITLE:حالة ودورة حياة المكونات}}</noinclude>
سنتحدّث في هذا القسم حول مفهوم حالة ودورة حياة المُكوِّنات في React، بإمكانك أن تجد من هنا [[React/react component|مرجعًا مُفصّلًا حول واجهة برمجة التطبيق (API) للمُكوِّنات]].

فلنتذكر مثال الساعة من قسم [[React/rendering elements|تصيير العناصر في React]]، تعلّمنا في ذلك القسم فقط طريقة واحدة لتحديث واجهة المستخدم عن طريق استدعاء التابع <code>ReactDOM.render()‎</code> لتغيير الناتج:<syntaxhighlight lang="javascript">
function tick() {
  const element = (
    <div>
      <h1>أهلًا بالعالم!</h1>
      <h2>الساعة الآن {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
</syntaxhighlight>[http://codepen.io/gaearon/pen/gwoJZk?editors=0010 جرِّب المثال على موقع CodePen].

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

بإمكاننا البدء عن طريق تغليف شكل السّاعة:<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>[http://codepen.io/gaearon/pen/dpdoYR?editors=0010 جرِّب المثال على موقع CodePen].

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

نريد بشكل مثالي أن نكتب هذه الشيفرة مرة واحدة ونجعل المُكوِّن <code>Clock</code> يُحدِّث نفسه:<syntaxhighlight lang="javascript">
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

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

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

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

== تحويل الدالة إلى صنف ==
بإمكانك تحويل مُكوِّنات الدوال مثل <code>Clock</code> إلى أصناف بخمس خطوات:
# إنشاء [[JavaScript/class|صنف]] بنفس الاسم والذي يمتد (extends) إلى <code>React.Component</code>.
# إضافة تابع فارغ وحيد لهذا الصنف اسمه <code>render()</code>‎.
# نقل جسم الدالة إلى التّابع <code>render()</code>‎.
# تبديل <code>props</code> إلى <code>this.props</code> في جسم التّابع <code>render()‎</code>.
# حذف باقي تصريح الدالة الفارغ.
<syntaxhighlight lang="javascript">
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>أهلًا بالعالم!</h1>
        <h2>الساعة الآن {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
</syntaxhighlight>[http://codepen.io/gaearon/pen/zKRGpo?editors=0010 جرِّب المثال على موقع CodePen].

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

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

== إضافة الحالة المحلية للصنف ==
سننقل التاريخ <code>date</code> من الخاصيّات <code>props</code> إلى الحالة في ثلاث خطوات:

-'''أولًا:''' تبديل <code>this.props.date</code> بـ <code>this.state.date</code> في التّابع <code>render()‎</code>:<syntaxhighlight lang="javascript">
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>أهلًا بالعالم!</h1>
        <h2>الساعة الآن {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
</syntaxhighlight>-'''ثانيًا:''' إضافة [[JavaScript/class|دالة بانية للصنف (constructor)]] والتي تُعيِّن القيمة المبدئية <code>this.state</code>:<syntaxhighlight lang="javascript">
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>
    );
  }
}

</syntaxhighlight>لاحظ كيف مرّرنا الخاصيّات <code>props</code> إلى الدالة البانية:<syntaxhighlight lang="javascript">
constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

</syntaxhighlight>ينبغي لمُكوِّنات الأصناف أن تستدعي دومًا الدالة البانية مع الخاصيّات <code>props</code>.

-'''ثالثًا:''' إزالة الخاصيّة <code>date</code> من العنصر ‎<code><Clock />‎</code>:<syntaxhighlight lang="javascript">
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

</syntaxhighlight>سنعيد لاحقًا إضافة شيفرة عداد الوقت إلى المُكوِّن نفسه.

تبدو النتيجة كما يلي:<syntaxhighlight lang="javascript">
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')
);

</syntaxhighlight>[http://codepen.io/gaearon/pen/KgQpJd?editors=0010 جرِّب المثال على موقع CodePen].

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

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

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

بإمكاننا التصريح عن توابع خاصّة في مُكوِّنات الأصناف لتنفيذ بعض الشيفرات عند وصل وفصل المُكوِّن:<syntaxhighlight lang="javascript">
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>
    );
  }
}

</syntaxhighlight>تُدعى هذه التوابع بخُطافات دورة الحياة (lifecycle hooks).

يعمل الخُطاف <code>componentDidMount()‎</code> بعد تصيير ناتج المُكوِّن إلى DOM، لذلك هو مكان مُلائم لتعيين عداد الوقت:<syntaxhighlight lang="javascript">
componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

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

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

سننهي عدّاد الوقت في خُطاف دورة الحياة <code>componentWillUnmount()</code>‎:<syntaxhighlight lang="javascript">
componentWillUnmount() {
    clearInterval(this.timerID);
  }

</syntaxhighlight>وأخيرًا سنضيف تابعًا يُدعى <code>tick()</code>‎ يُنفِّذه المُكوِّن <code>Clock</code> في كل ثانية. سيستخدم <code>this.setState()‎</code> لجدولة التحديثات إلى الحالة المحليّة للمُكوِّن:<syntaxhighlight lang="javascript">
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')
);

</syntaxhighlight>[http://codepen.io/gaearon/pen/amqdNA?editors=0010 جرِّب المثال على موقع CodePen].

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

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

== استخدام الحالة بشكل صحيح ==
هنالك ثلاثة أشياء ينبغي أن تعلمها حول <code>setState()</code>‎.

=== لا تعدل الحالة بشكل مباشر ===
على سبيل المثال لن يُعيد المثال التالي تصيير المُكوِّن:<syntaxhighlight lang="javascript">
// طريقة خاطئة
this.state.comment = 'أهلًا';
</syntaxhighlight>استخدم <code>setState()</code>‎ بدلًا من ذلك:<syntaxhighlight lang="javascript">
// الطريقة الصحيحة
this.setState({comment: 'أهلًا'});

</syntaxhighlight>المكان الوحيد الذي يُمكنك فيه تعيين <code>this.state</code> هو الدالة البانية.

=== قد تكون تحديثات الحالة غير متزامنة ===
قد تجمع React نداءات عديدة للتّابع <code>setState()</code>‎ في تحديث واحد من أجل تحسين الأداء.

بما أنّ <code>this.props</code> و <code>this.state</code>  قد تُحدَّث بشكل غير متزامن، فيجب ألّا تعتمد على قيمها لحساب الحالة التالية.

على سبيل المثال قد تفشل الشيفرة التالية بتحديث عدّاد الوقت:<syntaxhighlight lang="javascript">
// طريقة خاطئة
this.setState({
  counter: this.state.counter + this.props.increment,
});

</syntaxhighlight>لإصلاح ذلك استخدم شكل آخر من <code>setState()</code>‎ يقبل دالة بدلًا من كائن، حيث تستقبل هذه الدالة الحالة السّابقة كوسيط أول لها، والخاصيّات <code>props</code> في وقت تطبيق التحديث كوسيطٍ ثانٍ لها:<syntaxhighlight lang="javascript">
// الطريقة الصحيحة
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

</syntaxhighlight>استخدمنا [[JavaScript/Arrow Functions|الدوال السهمية]] في المثال السّابق، ولكنّها تعمل أيضًا مع الدوال الاعتياديّة:<syntaxhighlight lang="javascript">
// الطريقة الصحيحة
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

</syntaxhighlight>

=== تدمج React تحديثات الحالة ===
عندما تستدعي <code>setState()</code>‎، تدمج React الكائن الذي تُزوِّدها به مع الحالة الحاليّة.

على سبيل المثال قد تحتوي حالتك على متغيّرات مستقلّة عديدة:<syntaxhighlight lang="javascript">
constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

</syntaxhighlight>يُمكنِك بعد ذلك تحديثها بشكل مستقل باستدعاءات منفصلة للتابع <code>setState()</code>‎:<syntaxhighlight lang="javascript">
componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

</syntaxhighlight>يكون هذا الدمج ضئيلًا، لذلك لا يُؤثِّر تحديث حالة التعليقات <code>this.setState({comments})</code>‎ على حالة المنشورات أي <code>this.state.posts</code>، ولكنّه يستبدل حالة التعليقات <code>this.state.comments</code> بشكل كامل.

== تتدفق البيانات للمستويات الأدنى ==
لا تعلم المُكوِّنات الآباء ولا حتى الأبناء إن كان مُكوِّن مُحدَّد لديه حالة أو بدون حالة، ولا يجب أن تُبالي إن كان مُعرَّفًا كدالة أو كصنف.

هذا هو السبّب وراء تسمية الحالة بالمحليّة أو المُغلَّفة، فهي غير قابلة للوصول من قبل أي مُكوِّن آخر غير المُكوِّن الذي يملكها ويُعيّنها.

قد يختار المُكوِّن تمرير حالته كخاصيّات <code>props</code> إلى عناصره الأبناء في المستوى الأدنى:<syntaxhighlight lang="javascript">
<h2>الساعة الآن {this.state.date.toLocaleTimeString()}.</h2>
</syntaxhighlight>يعمل هذا المثال مع المُكوِّنات المُعرَّفة من قبل المستخدم أيضًا:<syntaxhighlight lang="javascript">
<FormattedDate date={this.state.date} />
</syntaxhighlight>يستقبل المُكوِّن <code>FormattedDate</code> التاريخ <code>date</code> في خاصيّاته ولن يعلم ما إذا كان هذا التاريخ قد أتى عن طريق حالة المُكوِّن <code>Clock</code>، أو من خاصيّات <code>Clock</code>، أو كُتِب بشكل يدوي:<syntaxhighlight lang="javascript">
function FormattedDate(props) {
  return <h2>الساعة الآن {props.date.toLocaleTimeString()}.</h2>;
}
</syntaxhighlight>[http://codepen.io/gaearon/pen/zKRqNB?editors=0010 جرِّب المثال على موقع CodePen].

يُدعى هذا عادةً بتدفق البيانات من المستوى الأعلى للأدنى (top-down) أو أحادي الاتجاه (unidirectional). حيث أي حالة يمتلكها مُكوِّن مُحدَّد، وأي بيانات أو واجهة مستخدم مُشتقَّة من تلك الحالة بإمكانها فقط التأثير على المُكوِّنات التي تحتها في شجرة المُكوِّنات.

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

ولنبرهن أنّ جميع المُكوِّنات معزولة حقًا، فبإمكاننا إنشاء المُكوِّن <code>App</code> الذي يُظهِر شجرة من مُكوِّنات <code>‎<Clock></code>‎:<syntaxhighlight lang="javascript">
function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

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

</syntaxhighlight>[http://codepen.io/gaearon/pen/vXdGmd?editors=0010 جرِّب المثال على موقع CodePen].

يُعيِّن كل مُكوِّن <code>Clock</code> عدّاده الخاص به ويُحدِّثه بشكل منفصل.

في تطبيقات React عند استخدام مُكوِّن بداخل مُكوِّن آخ، فيُعتبَر المُكوِّن تفصيلًا تنفيذيًّا للمُكوِّن الآخر سواءً كان المُكوِّن يحتوي على حالة (stateful) أو بدون حالة (stateless) ويُمكِن أن يتغيّر عبر الوقت، بإمكانك استخدام المُكوِّنات بدون الحالة بداخل المُكوِّنات ذات الحالة وبالعكس أيضًا.

== مصادر ==
* [https://reactjs.org/docs/state-and-lifecycle.html صفحة حالة ودورة حياة المكونات في توثيق React الرسمي].
[[تصنيف:React]]