الفرق بين المراجعتين ل"React/react component"

مراجعة 12:18، 5 سبتمبر 2018

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

لمحة عامة

تُتيح لك React أن تُعرِّف المكوّنات كأصناف أو دوال. تُزوّدنا المكوّنات المُعرَّفة كأصناف بميزات أكثر حاليًّا والتي سنشرحها بالتفصيل هنا. لتعريف صنف مكوّن React تحتاج إلى أن تمتد إلى الصنف React.Component:

class Welcome extends React.Component {
  render() {
    return <h1>أهلًا {this.props.name}</h1>;
  }
}

التابع الوحيد الذي يجب عليك تعريفه في الصنف الفرعي الناتج عن الصنف React.Component هو render()‎، أمّا بقية التوابع المذكورة في هذه الصفحة هي اختياريّة.

نوصي بشدّة ألّا تُنشِئ أصنافًا أساسيّة للمكوّنات خاصّة بك، ففي مكوّنات React تتحقّق إعادة استخدام الشيفرة بشكل أساسي عبر التركيب (composition) بدلًا من الوراثة (inheritance).

ملاحظة: لا تُجبِرك React على استخدام صياغة أصناف ES6. إن كنت تفضّل تجنّب ذلك فبإمكانك استخدام الوحدة create-react-class أو أي تجريد مُخصَّص مماثل بدلًا من ذلك. انظر إلى استخدام React بدون ES6 لتعلّم المزيد.

دورة حياة المكوّن

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

الوصل (mounting)

تُستدعى هذه التوابع بالترتيب التالي عند إنشاء نسخة من المكوّن وإدخالها إلى DOM:

constructor()‎.
static getDerivedStateFromProps()‎.
render()‎.
componentDidMount()‎.

ملاحظة: يُعتبر هذا التابع قديمًا ويجب أن تتجنّب استخدامه في الشيفرة الجديدة:

UNSAFE_componentWillMount()‎.

التحديث

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

static getDerivedStateFromProps()‎.
shouldComponentUpdate()‎.
render()‎.
getSnapshotBeforeUpdate()‎.
componentDidUpdate()‎.

ملاحظة: تُعتبر هذه التوابع قديمة ويجب أن تتجنّب استخدامها في الشيفرة الجديدة:

UNSAFE_componentWillUpdate()‎.
UNSAFE_componentWillReceiveProps()‎.

الفصل (unmounting)

يُستدعى هذا التابع عند إزالة المكون من DOM:

componentWillUnmount()‎.

معالجة الأخطاء

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

componentDidCatch()‎.

واجهات برمجة التطبيق الأخرى

يُعطينا كل مكوّن بواجهات برمجة تطبيق أخرى:

setState()‎.
forceUpdate()‎.

خاصيّات الصنف

defaultProps.
displayName.

خاصيّات النسخة (Instance)

props.
state.

مرجع

أشيع توابع دورة الحياة المستخدمة

تُغطّي التوابع في هذا القسم معظم حالات الاستخدام التي ستصادفها أثناء إنشاء مكوّنات React. للحصول على مرجع لمخطط بصري انظر إلى مخطط دورة حياة المكوّنات.

`render()‎`

render()

التابع render()‎ هو التابع الوحيد المطلوب وجوده في مكوّنات الأصناف.

عند استدعائه يجب أن يفحص this.props و this.state ويُعيد إحدى الأنواع التالية:

عناصر React: تُنشَأ عادةً عن طريق JSX. على سبيل المثال ‎<div />‎ و ‎<MyComponent />‎ هي عناصر React والتي تأمر React بتصيير عقدة DOM ومكوّن مُعرَّف من قبل المستخدم على التوالي وبالترتيب.
الأجزاء والمصفوفات: تسمح لك بإعادة عناصر متعددة من التابع render. انظر إلى توثيق الأجزاء للمزيد من التفاصيل.
المنافذ (Portals): تسمح لك بتصيير العناصر الأبناء إلى تفرعات مختلفة من DOM. انظر إلى توثيق المنافذ للمزيد من التفاصيل.
الأعداد والسلاسل النصيّة: تُصيَّر كعقد نصيّة في DOM.
القيم المنطقية (Booleans) أو null: لا تُصيِّر شيئًا. (موجودة في معظم الأحيان لدعم النمط ‎return test && <Child />‎ حيث يكون test هو قيمة منطقيّة).

يجب أن يكون التابع render()‎ نقيًّا، أي لا يُعدِّل حالة المكوّن، ويعيد نفس النتيجة في كل مرة يُستدعى فيها، ولا يتفاعل بشكل مباشر مع المتصفح.

إن أردت التفاعل مع المتصفح فأنجز العمل المطلوب ضمن التابع componentDidMount()‎ أو أي تابع من توابع دورة الحياة. إنّ الحفاظ على التابع render()‎ نقيًّا يزيد سهولة التفكير بمكوّناتك.

ملاحظة: لن يُستدعى التابع render()‎ إن أعاد التابع shouldComponentUpdate()‎ القيمة false.

@@ سطر 67: / سطر 67: @@
 ==== <code>render()‎</code> ====
+<syntaxhighlight lang="javascript">
+render()
+</syntaxhighlight>التابع <code>render()‎</code> هو التابع الوحيد المطلوب وجوده في مكوّنات الأصناف.
+عند استدعائه يجب أن يفحص <code>this.props</code> و <code>this.state</code> ويُعيد إحدى الأنواع التالية:
+* عناصر React: تُنشَأ عادةً عن طريق JSX. على سبيل المثال ‎<code><nowiki><div /></nowiki></code>‎ و ‎<code><MyComponent />‎</code> هي عناصر React والتي تأمر React بتصيير عقدة DOM ومكوّن مُعرَّف من قبل المستخدم على التوالي وبالترتيب.
+* الأجزاء والمصفوفات: تسمح لك بإعادة عناصر متعددة من التابع <code>render</code>. انظر إلى توثيق الأجزاء للمزيد من التفاصيل.
+* المنافذ (Portals): تسمح لك بتصيير العناصر الأبناء إلى تفرعات مختلفة من DOM. انظر إلى توثيق المنافذ للمزيد من التفاصيل.
+* الأعداد والسلاسل النصيّة: تُصيَّر كعقد نصيّة في DOM.
+* القيم المنطقية (Booleans) أو <code>null</code>: لا تُصيِّر شيئًا. (موجودة في معظم الأحيان لدعم النمط <code>‎return test && <Child /></code>‎ حيث يكون <code>test</code> هو قيمة منطقيّة).
+يجب أن يكون التابع <code>render()‎</code> نقيًّا، أي لا يُعدِّل حالة المكوّن، ويعيد نفس النتيجة في كل مرة يُستدعى فيها، ولا يتفاعل بشكل مباشر مع المتصفح.
+إن أردت التفاعل مع المتصفح فأنجز العمل المطلوب ضمن التابع <code>componentDidMount()</code>‎ أو أي تابع من توابع دورة الحياة. إنّ الحفاظ على التابع <code>render()</code>‎ نقيًّا يزيد سهولة التفكير بمكوّناتك.
+'''ملاحظة:''' لن يُستدعى التابع <code>render()</code>‎ إن أعاد التابع <code>shouldComponentUpdate()</code>‎ القيمة <code>false</code>.
+==== <code>constructor()‎</code> ====