الفرق بين المراجعتين ل"React/react component"
Kinan-mawed (نقاش | مساهمات) |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الصنف React.Component}}</noinclude> | <noinclude>{{DISPLAYTITLE:الصنف React.Component}}</noinclude> | ||
| − | تحتوي هذه الصفحة على مرجع مُفصَّل لواجهة برمجة التطبيقات (API) لتعريف صنف مكوّن React. سنفترض أنك على معرفة بمفاهيم React الأساسية، مثل الخاصيّات props والمكوّنات، بالإضافة إلى الحالة ودورة حياة المكوّنات. إن لم تكن كذلك فاطلع عليها أولًا. | + | تحتوي هذه الصفحة على مرجع مُفصَّل لواجهة برمجة التطبيقات (API) لتعريف صنف مكوّن React. سنفترض أنك على معرفة بمفاهيم React الأساسية، مثل الخاصيّات <code>props</code> والمكوّنات، بالإضافة إلى الحالة ودورة حياة المكوّنات. إن لم تكن كذلك فاطلع عليها أولًا. |
== لمحة عامة == | == لمحة عامة == | ||
| − | تُتيح لك React أن تُعرِّف المكوّنات كأصناف أو دوال. تُزوّدنا المكوّنات المُعرَّفة كأصناف بميزات أكثر حاليًّا والتي سنشرحها بالتفصيل هنا. لتعريف صنف مكوّن React تحتاج إلى أن تمتد إلى الصنف React.Component:<syntaxhighlight lang="javascript"> | + | تُتيح لك React أن تُعرِّف المكوّنات كأصناف أو دوال. تُزوّدنا المكوّنات المُعرَّفة كأصناف بميزات أكثر حاليًّا والتي سنشرحها بالتفصيل هنا. لتعريف صنف مكوّن React تحتاج إلى أن تمتد إلى الصنف <code>React.Component</code>:<syntaxhighlight lang="javascript"> |
class Welcome extends React.Component { | class Welcome extends React.Component { | ||
render() { | render() { | ||
| سطر 10: | سطر 10: | ||
} | } | ||
| − | </syntaxhighlight>التابع الوحيد الذي يجب عليك تعريفه في الصنف الفرعي الناتج عن الصنف React.Component هو render()، أمّا بقية التوابع المذكورة في هذه الصفحة هي اختياريّة. | + | </syntaxhighlight>التابع الوحيد الذي يجب عليك تعريفه في الصنف الفرعي الناتج عن الصنف <code>React.Component</code> هو <code>render()</code>، أمّا بقية التوابع المذكورة في هذه الصفحة هي اختياريّة. |
نوصي بشدّة ألّا تُنشِئ أصنافًا أساسيّة للمكوّنات خاصّة بك، ففي مكوّنات React تتحقّق إعادة استخدام الشيفرة بشكل أساسي عبر التركيب (composition) بدلًا من الوراثة (inheritance). | نوصي بشدّة ألّا تُنشِئ أصنافًا أساسيّة للمكوّنات خاصّة بك، ففي مكوّنات React تتحقّق إعادة استخدام الشيفرة بشكل أساسي عبر التركيب (composition) بدلًا من الوراثة (inheritance). | ||
| − | ملاحظة: لا تُجبِرك React على استخدام صياغة أصناف ES6. إن كنت تفضّل تجنّب ذلك فبإمكانك استخدام الوحدة create-react-class أو أي تجريد مُخصَّص مماثل بدلًا من ذلك. انظر إلى استخدام React بدون ES6 لتعلّم المزيد. | + | '''ملاحظة:''' لا تُجبِرك React على استخدام صياغة أصناف ES6. إن كنت تفضّل تجنّب ذلك فبإمكانك استخدام الوحدة <code>create-react-class</code> أو أي تجريد مُخصَّص مماثل بدلًا من ذلك. انظر إلى استخدام React بدون ES6 لتعلّم المزيد. |
== دورة حياة المكوّن == | == دورة حياة المكوّن == | ||
| سطر 21: | سطر 21: | ||
=== الوصل (mounting) === | === الوصل (mounting) === | ||
تُستدعى هذه التوابع بالترتيب التالي عند إنشاء نسخة من المكوّن وإدخالها إلى DOM: | تُستدعى هذه التوابع بالترتيب التالي عند إنشاء نسخة من المكوّن وإدخالها إلى DOM: | ||
| − | * constructor(). | + | * <code>constructor()</code>. |
| − | * static getDerivedStateFromProps(). | + | * <code>static getDerivedStateFromProps()</code>. |
| − | * render(). | + | * <code>render()</code>. |
| − | * componentDidMount(). | + | * <code>componentDidMount()</code>. |
| − | ملاحظة: يُعتبر هذا التابع قديمًا ويجب أن تتجنّب استخدامه في الشيفرة الجديدة: | + | '''ملاحظة:''' يُعتبر هذا التابع قديمًا ويجب أن تتجنّب استخدامه في الشيفرة الجديدة: |
| − | * UNSAFE_componentWillMount(). | + | * <code>UNSAFE_componentWillMount()</code>. |
=== التحديث === | === التحديث === | ||
يُمكِن أن يحصل التحديث عن طريق التغييرات في الخاصيّات أو الحالة. تُستدعى هذه التوابع بالترتيب التالي عند إعادة تصيير المكوّن: | يُمكِن أن يحصل التحديث عن طريق التغييرات في الخاصيّات أو الحالة. تُستدعى هذه التوابع بالترتيب التالي عند إعادة تصيير المكوّن: | ||
| − | * static getDerivedStateFromProps(). | + | * <code>static getDerivedStateFromProps()</code>. |
| − | * shouldComponentUpdate(). | + | * <code>shouldComponentUpdate()</code>. |
| − | * render(). | + | * <code>render()</code>. |
| − | * getSnapshotBeforeUpdate(). | + | * <code>getSnapshotBeforeUpdate()</code>. |
| − | * componentDidUpdate(). | + | * <code>componentDidUpdate()</code>. |
ملاحظة: تُعتبر هذه التوابع قديمة ويجب أن تتجنّب استخدامها في الشيفرة الجديدة: | ملاحظة: تُعتبر هذه التوابع قديمة ويجب أن تتجنّب استخدامها في الشيفرة الجديدة: | ||
| − | * UNSAFE_componentWillUpdate(). | + | * <code>UNSAFE_componentWillUpdate()</code>. |
| − | * UNSAFE_componentWillReceiveProps(). | + | * <code>UNSAFE_componentWillReceiveProps()</code>. |
=== الفصل (unmounting) === | === الفصل (unmounting) === | ||
يُستدعى هذا التابع عند إزالة المكون من DOM: | يُستدعى هذا التابع عند إزالة المكون من DOM: | ||
| − | * componentWillUnmount(). | + | * <code>componentWillUnmount()</code>. |
=== معالجة الأخطاء === | === معالجة الأخطاء === | ||
يُستدعى هذا التابع عند وجود خطأ أثناء التصيير، أو في تابع دورة حياة المكوّن، أو في الدالة البانية لأي من المكوّنات الأبناء. | يُستدعى هذا التابع عند وجود خطأ أثناء التصيير، أو في تابع دورة حياة المكوّن، أو في الدالة البانية لأي من المكوّنات الأبناء. | ||
| − | + | ||
| + | ====== componentDidCatch(). ====== | ||
== واجهات برمجة التطبيق الأخرى == | == واجهات برمجة التطبيق الأخرى == | ||
يُعطينا كل مكوّن بواجهات برمجة تطبيق أخرى: | يُعطينا كل مكوّن بواجهات برمجة تطبيق أخرى: | ||
| − | * setState(). | + | * <code>setState()</code>. |
| − | * forceUpdate(). | + | * <code>forceUpdate()</code>. |
== خاصيّات الصنف == | == خاصيّات الصنف == | ||
| − | * defaultProps. | + | * <code>defaultProps</code>. |
| − | * displayName. | + | * <code>displayName</code>. |
== خاصيّات النسخة (Instance) == | == خاصيّات النسخة (Instance) == | ||
| − | * props. | + | * <code>props</code>. |
| − | * state. | + | * <code>state</code>. |
== مرجع == | == مرجع == | ||
| سطر 65: | سطر 66: | ||
تُغطّي التوابع في هذا القسم معظم حالات الاستخدام التي ستصادفها أثناء إنشاء مكوّنات React. للحصول على مرجع لمخطط بصري انظر إلى مخطط دورة حياة المكوّنات. | تُغطّي التوابع في هذا القسم معظم حالات الاستخدام التي ستصادفها أثناء إنشاء مكوّنات React. للحصول على مرجع لمخطط بصري انظر إلى مخطط دورة حياة المكوّنات. | ||
| − | ==== render() ==== | + | ==== <code>render()</code> ==== |
مراجعة 12:15، 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. للحصول على مرجع لمخطط بصري انظر إلى مخطط دورة حياة المكوّنات.