عرض مصدر React/lifting state up

<noinclude>{{DISPLAYTITLE:رفع الحالات المشتركة للمستوى الأعلى}}</noinclude>
عادةً ما تحتاج المُكوِّنات المُتعدِّدة إلى أن تعكس نفس البيانات المتغيّرة. نُوصي برفع الحالة المشتركة بينها إلى أقرب عنصر أب مشترك بينها، فلنشاهد كيف يُمكِن تطبيق ذلك عمليًّا.

في هذا القسم سنُنشِئ آلة حاسبة للحرارة والتي تحسب إن كان الماء سيغلي في الدرجة المُعطاة.

سنبدأ بمُكوِّن يُدعى <code>BoilingVerdict</code>، والذي يقبل درجة الحرارة بالسيلزيوس <code>celsius</code> كخاصيّة <code>props</code> له، ويطبع إن كانت هذه الدرجة كافية لغلي الماء:<syntaxhighlight lang="javascript">
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>سيغلي الماء.</p>;
  }
  return <p>لن يغلي الماء.</p>;
}

</syntaxhighlight>سنُنشِئ الآن مُكوِّن الآلة الحاسبة <code>Calculator</code>، والذي يُصيِّر حقل إدخال <code>[[HTML/input|<input>]]</code> يُتيح لنا إدخال درجة الحرارة ويحتفظ بقيمتها في <code>this.state.temperature</code>. يُصيِّر هذا المُكوِّن أيضًا المُكوِّن <code>BoilingVerdict</code> مع تزويده بدرجة الحرارة التي أدخلها المستخدم:<syntaxhighlight lang="javascript">
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>أدخل درجة الحرارة بالسيلزيوس:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />

        <BoilingVerdict
          celsius={parseFloat(temperature)} />

      </fieldset>
    );
  }
}

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

== إضافة حقل إدخال آخر ==
المتطلّب الآخر الذي نريده إلى جانب إدخال الحرارة بالسيلزيوس هو تزويد المستخدم بحقل إدخال لدرجة الحرارة بالفهرنهايت وإبقائهما متزامنين معًا. بإمكاننا البدء باستخراج المُكوِّن <code>TemperatureInput</code> من المُكوِّن <code>Calculator</code>. سنضيف خاصيّة جديدة وهي المقياس <code>scale</code> والتي يُمكِن أن تكون قيمتها <code>"c"</code> أو <code>"f"</code>:<syntaxhighlight lang="javascript">
const scaleNames = {
  c: 'سيلزيوس',
  f: 'فهرنهايت'
};

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

</syntaxhighlight>نستطيع الآن تغيير المُكوِّن <code>Calculator</code> لتصيير حقلين منفصلين لإدخال درجة الحرارة:<syntaxhighlight lang="javascript">
class Calculator extends React.Component {
  render() {
    return (
      <div>
        <TemperatureInput scale="c" />
        <TemperatureInput scale="f" />
      </div>
    );
  }
}

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

نمتلك الآن حقلي إدخال، ولكن إن أدخلت درجة الحرارة في أحدهما فلن تتحدّث قيمة الآخر، وهذا يتعارض مع متطلّباتنا بأن نجعل القيمتين متزامنتان.

لا يُمكننا أيضًا عرض المُكوِّن <code>BoilingVerdict</code> من خلال المُكوِّن <code>Calculator</code>، حيث لا يعرف هذا الأخير درجة الحرارة الحاليّة لأنّها مخفيّة بداخل المُكوِّن <code>TemperatureInput</code>.

== كتابة دوال التحويل ==
سنكتب أولًا دالتين للتحويل من سيلزيوس إلى فهرنهايت وبالعكس:<syntaxhighlight lang="javascript">
function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

</syntaxhighlight>تُحوِّل هاتان الدالتان الأرقام، سنكتب دالة أخرى تقبل سلسلة نصيّة لدرجة الحرارة <code>temperature</code> ودالة للتحويل تستقبل وسائط وتُعيد سلسلة نصيّة. سنستخدمها لحساب قيمة أحد حقول الإدخال بناءً على قيمة الآخر.

تُعيد هذه الدالة سلسلة نصيّة فارغة عند إدخال درجة حرارة خاطئة، وتُقرِّب الناتج إلى ثلاث قيم بعد الفاصلة:<syntaxhighlight lang="javascript">
function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

</syntaxhighlight>على سبيل المثال استخدام هذه الدالة بالشكل ‎<code>tryConvert('abc', toCelsius)</code>‎ يُعيد سلسلة نصيّة فارغة، واستخدامها بالشكل <code>‎tryConvert('10.22', toFahrenheit)</code>‎ يُعيد القيمة <code>'50.396'</code>.

== رفع الحالة للأعلى ==
يحتفظ إلى حدّ الآن كل من المُكوِّنين <code>TemperatureInput</code> بقيمهما بشكلٍ مُستقلٍ في الحالة المحليّة:<syntaxhighlight lang="javascript">
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    // ...  

</syntaxhighlight>ولكن نريد مزامنة هذين الحقلين مع بعضهما، فعندما نُحدِّث حقل إدخال درجة الحرارة بالسيلزيوس فيجب على حقل درجة الحرارة بالفهرنهايت أن يعكس قيمة درجة الحرارة المُحوَّلة، وبالعكس.

تُنفَّذ مشاركة الحالة في React عن طريق نقلها إلى أقرب مُكوِّن مشترك للمُكوِّنات التي تحتاجها، ويُدعى هذا برفع الحالة للأعلى (lifting state up). سنُزيل الحالة المحليّة من <code>TemperatureInput</code> وننقلها إلى <code>Calculator</code> بدلًا من ذلك.

إن كان المُكوِّن <code>Calculator</code> يمتلك الحالة المشتركة، فسيُصبِح "مصدر الحقيقة" بالنسبة لدرجة الحرارة الحاليّة في حقلي الإدخال، حيث يُمكِنه توجيه الأوامر لهما بأن يمتلكا قيم متوافقة مع بعضهما. بما أنّ الخاصيّات <code>props</code> في المكونين <code>TemperatureInput</code> قادمة من نفس الأب وهو المُكوِّن <code>Calculator</code>، فسيبقى الحقلان متزامنان دومًا.

فلنشاهد كيفية عمل ذلك خطوةً بخطوة.

بدايةً سنضع <code>this.props.temperature</code> بدلًا من <code>this.state.temperature</code> في المُكوِّن <code>TemperatureInput</code>. فلنفترض الآن وجود <code>this.props.temperature</code> على الرغم من أنّنا سنحتاج إلى تمريره من المُكوِّن <code>Calculator</code>:<syntaxhighlight lang="javascript">
 render() {
	// سابقًا كنا نضع: const temperature = this.state.temperature;
    const temperature = this.props.temperature;
    // ...

</syntaxhighlight>نعلم أنّ الخاصيّات <code>props</code> [[React/components and props#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA props .D9.82.D8.A7.D8.A8.D9.84.D8.A9 .D9.84.D9.84.D9.82.D8.B1.D8.A7.D8.A1.D8.A9 .D9.81.D9.82.D8.B7|قابلة للقراءة فقط]]، فعندما كانت درجة الحرارة <code>temperature</code> في الحالة المحليّة لم يكن بإمكان المُكوِّن <code>TemperatureInput</code> إلّا أن يستدعي التابع <code>this.setState()‎</code> لتغييرها. أمّا الآن وقد أصبحت درجة الحرارة <code>temperature</code> قادمة من الأب كخاصيّة <code>prop</code> فلا يمتلك <code>TemperatureInput</code> أي قدرة على التحكّم بها.

تُحلّ هذه المشكلة عادةً في React عن طريق جعل المُكوِّن مضبوطًا (controlled)، فكما يقبل العنصر <code>[[HTML/input|<input>]]</code> خاصيّات للقيمة <code>value</code> و <code>onChange</code>، فبإمكان العنصر المُخصَّص <code>TemperatureInput</code> أن يقبل خاصيّة لدرجة الحرارة <code>temperature</code> و خاصيّة عند تغيير درجة الحرارة <code>onTemperatureChange</code> من المُكوِّن الأب له وهو <code>Calculator</code>.

عندما يُريد الآن <code>TemperatureInput</code> تحديث درجة حرارته يستدعي <code>this.props.onTemperatureChange</code>:<syntaxhighlight lang="javascript">
handleChange(e) {
	// سابقًا كنّا نكتب: this.setState({temperature: e.target.value});
    this.props.onTemperatureChange(e.target.value);
    // ...

</syntaxhighlight>'''ملاحظة:''' ليس هنالك معنى خاص لأسماء الخاصيّات <code>temperature</code> و <code>onTemperatureChange</code> في المُكوِّنات المُخصَّصة، فقد كان بإمكاننا تسميتها بأي اسم آخر، مثل الاسم <code>value</code> و <code>onChange</code> والتي هي أسماء شائعة.

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

قبل الخوض في التغييرات في المُكوِّن <code>Calculator</code> فلنتذكّر التغييرات التي أحدثناها حتى الآن في المُكوِّن <code>TemperatureInput</code>، لقد أزلنا حالته المحليّة وبدلًا من استخدام <code>this.state.temperature</code> فإنّنا نستخدم الآن <code>this.props.temperature</code>. وبدلًا من استدعاء <code>this.setState()‎</code> عندما نريد إحداث تغيير نستدعي الآن <code>this.props.onTemperatureChange()‎</code> والتي يُزوِّدنا بها المُكوِّن <code>Calculator</code>:<syntaxhighlight lang="javascript">
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>أدخل درجة الحرارة بالـ{scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

</syntaxhighlight>والآن فلننتقل إلى المُكوِّن <code>Calculator</code>. سنُخزِّن درجة الحرارة المُدخَلَة <code>temperature</code> والمقياس <code>scale</code> في حالته المحليّة، وهي الحالة التي رفعنا مستواها للأعلى من حقول الإدخال والتي ستخدم كمصدر للحقيقة لتلك الحقول. يُمثِّل ذلك بشكلٍ مصغّر جميع البيانات التي نحتاج معرفتها من أجل تصيير الحقول.

على سبيل المثال إن أدخلنا القيمة <code>37</code> إلى حقل إدخال السيلزيوس، فستكون حالة المُكوِّن <code>Calculator</code> هي:<syntaxhighlight lang="text">
{
  temperature: '37',
  scale: 'c'
}

</syntaxhighlight>إن عدّلنا لاحقًا حقل درجة الحرارة بالفهرنهايت إلى <code>212</code> فستُصبِح حالة <code>Calculator</code> كما يلي:<syntaxhighlight lang="text">
{
  temperature: '212',
  scale: 'f'
}

</syntaxhighlight>كان بإمكاننا تخزين قيمة كلا الحقلين ولكن تبيّن أنّ هذا غير ضروري، فيكفي تخزين القيمة التي تغيّرت مُؤخّرًا فقط والمقياس الذي يُمثّلها. باستطاعتنا بعد ذلك تبديل قيمة الحقل الآخر اعتمادًا على قيم <code>temperature</code> و <code>scale</code> فقط.

يبقى حقلا الإدخال متزامنين لأنّ قيمهما محسوبة من نفس الحالة:<syntaxhighlight lang="javascript">
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />

        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />

        <BoilingVerdict
          celsius={parseFloat(celsius)} />

      </div>
    );
  }
}

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

لا يُهم الآن أي حقل إدخال تُعدِّل، فستُحدَّث <code>this.state.temperature</code> و <code>this.state.scale</code> الموجودة في المُكوِّن <code>Calculator</code>، حيث يأخذ أحد الحقلين القيمة التي تدخلها ويُعاد حساب قيمة الآخر بناءً عليها.

فلنعد تلخيص ما يحدث عند تعديلك لحقل الإدخال:
* تستدعي React الدالة المُحدَّدة في الخاصيّة <code>onChange</code> كما هو الحال عند استخدام العنصر <code>[[HTML/input|<input>]]</code> في DOM. في حالتنا التابع المطلوب هو <code>handleChange</code> الموجود في المُكوِّن <code>TemperatureInput</code>.
* يستدعي التابع <code>handleChange</code> الموجود ضمن المُكوِّن <code>TemperatureInput</code> الدالة <code>this.props.onTemperatureChange()‎</code> مع القيمة الجديدة المطلوبة. مع العلم أنّ خاصيّات هذا المُكوِّن <code>props</code> بما في ذلك <code>onTemperatureChange</code> قد زوّدنا بها المُكوِّن الأب له وهو <code>Calculator</code>.
* عندما صيّرنا <code>Calculator</code> مُسبقًا فقد حدَّد أنّ الدالة <code>onTemperatureChange</code> من المُكوِّن <code>TemperatureInput</code> ذو المقياس سيلزيوس هي نفسها التابع <code>handleCelsiusChange</code> الخاص بالمُكوِّن <code>Calculator</code>، والدالة <code>onTemperatureChange</code> من المُكوِّن <code>TemperatureInput</code> ذو المقياس فهرنهايت هي نفسها التابع <code>handleFahrenheitChange</code> الخاص بالمُكوِّن <code>Calculator</code>، لذلك يُستدعى أي من هذان التابعان اعتمادًا على حقل الإدخال الذي عدّلنا قيمته.
* بداخل هذين التابعين يطلب المُكوِّن <code>Calculator</code> من React أن تُعيد تصييره عن طريق استدعاء <code>this.setState()‎</code> بقيم حقول الإدخال الجديدة والمقياس الحالي لحقل الإدخال الذي عدّلناه.
* تستدعي React التابع <code>render</code> الخاص بالمُكوِّن <code>Calculator</code> لتعرف الشكل الذي ينبغي أن تكون عليه واجهة المستخدم. يُعاد حساب قيم حقول الإدخال بناءً على درجة الحرارة الحاليّة والمقياس قيد الاستخدام، تُحوَّل درجة الحرارة هنا.
* تستدعي React التابع <code>render</code> الخاص بكل مُكوِّن <code>TemperatureInput</code> مع خاصيّاتها <code>props</code> الجديدة المُحدَّدة عن طريق المُكوِّن <code>Calculator</code>، وبذلك تعرف الشكل الذي ينبغي أن تكون عليه واجهة المستخدم.
* تُحدِّث React DOM واجهة DOM لتُطابِق القيم المُدخَلَة المطلوبة، حيث يحتوي حقل الإدخال الذي عدّلناه القيمة التي أدخلناها بأنفسنا، أمّا حقل الإدخال الآخر فيُحدَّث بدرجة الحرارة بعد تحويلها للمقياس المُناسِب.
يجري كل تحديث بنفس الخطوات بحيث تبقى حقول الإدخال متزامنة.

== الدروس المستفادة ==
يجب أن يكون هناك "مصدر وحيد للحقيقة" لأيّة بيانات مُتغيِّرة في تطبيق React. تُضاف الحالة عادةً إلى المُكوِّن الذي يحتاجها للتصير أولًا، بعد ذلك إن كانت تحتاجها مُكوِّنات أخرى فبإمكانك رفعها إلى أقرب مُكوِّن مشترك. وبدلًأ من محاولة مزامنة الحالة بين مُكوِّنات مختلفة ينبغي عليك الاعتماد على [[React/state and lifecycle#.D8.AA.D8.AA.D8.AF.D9.81.D9.82 .D8.A7.D9.84.D8.A8.D9.8A.D8.A7.D9.86.D8.A7.D8.AA .D9.84.D9.84.D9.85.D8.B3.D8.AA.D9.88.D9.8A.D8.A7.D8.AA .D8.A7.D9.84.D8.A3.D8.AF.D9.86.D9.89|تدفق البيانات للمستويات الأدنى]].

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

إن كان هنالك شيء يجب اشتقاقه إمّا من الخاصيّأت أو الحالات فبالتأكيد ليس من الحالات، فمثلًا بدلًا من تخزين قيمة درجة الحرارة بمتغيرين للسيلزيوس والفهرنهايت (<code>celsiusValue</code> و <code>fahrenheitValue</code>)، نُخزِّن فقط آخر قيمة مُعدَّلة للحرارة <code>temperature</code> ومقياسها <code>scale</code>، حيث يُمكِن حساب قيمة الحقل الآخر دومًا منها في التّابع <code>render()‎</code>. يُتيح لنا هذا مسح أو تقريب الحقل الآخر إلى أقرب قيمة بدون خسارة أي دقّة في مُدخلات المستخدم.

عندما تجد خطأً في واجهة المستخدم فبإمكانك استخدام أدوات تطوير React لفحص الخاصيّات والتنقّل في شجرة العناصر للأعلى حتى تجد المُكوِّن المسؤول عن تحديث الحالة. يُتيح لك ذلك تتبّع الخطأ حتى الوصول إلى مصدره:
[[ملف:react-devtools-state-ef94afc3447d75cdc245c77efb0d63be.gif|بديل=react-inspect|مركز]]

== مصادر ==
* [https://reactjs.org/docs/lifting-state-up.html صفحة رفع الحالات المشتركة للمستوى الأعلى في توثيق React الرسمي].