الفرق بين المراجعتين ل"React/react without es6"
< React
اذهب إلى التنقل
اذهب إلى البحث
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:React بدون ES6}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:React بدون ES6}}</noinclude> | <noinclude>{{DISPLAYTITLE:React بدون ES6}}</noinclude> | ||
+ | نُعرِّف عادةً مُكوّنات React كأصناف JavaScript مُجرَّدة:<syntaxhighlight lang="javascript"> | ||
+ | class Greeting extends React.Component { | ||
+ | render() { | ||
+ | return <h1>أهلًا {this.props.name}</h1>; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </syntaxhighlight>إن لم تكن تستخدم ES6 بعد، فبإمكانك استخدام الوحدة <code>create-react-class</code> بدلًا من ذلك:<syntaxhighlight lang="javascript"> | ||
+ | var createReactClass = require('create-react-class'); | ||
+ | var Greeting = createReactClass({ | ||
+ | render: function() { | ||
+ | return <h1>أهلًا {this.props.name}</h1>; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | </syntaxhighlight>تُشبِه واجهة برمجة التطبيقات لأصناف ES6 الصنف <code>createReactClass()</code> مع بعض الاستثناءات. | ||
+ | |||
+ | == تعريف الخاصيات الافتراضية == | ||
+ | تُعرَّف الخاصيّات الافتراضيّة <code>defaultProps</code> في أصناف ودوال ES6 كخاصيّة ضمن المُكوّن نفسه:<syntaxhighlight lang="javascript"> | ||
+ | class Greeting extends React.Component { | ||
+ | // ... | ||
+ | } | ||
+ | |||
+ | Greeting.defaultProps = { | ||
+ | name: 'Mary' | ||
+ | }; | ||
+ | |||
+ | </syntaxhighlight>أمّا باستخدام <code>createReactClass()</code> فتحتاج لتعريف الدالة <code>getDefaultProps()</code> كدالة ضمن الكائن المُمرَّر:<syntaxhighlight lang="javascript"> | ||
+ | var Greeting = createReactClass({ | ||
+ | getDefaultProps: function() { | ||
+ | return { | ||
+ | name: 'Mary' | ||
+ | }; | ||
+ | }, | ||
+ | |||
+ | // ... | ||
+ | |||
+ | }); | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | == تعيين الحالة المبدئية == | ||
+ | في أصناف ES6 تستطيع تعريف الحالة المبدئية عن طريق تعيين <code>this.state</code> في الدالة البانية:<syntaxhighlight lang="javascript"> | ||
+ | class Counter extends React.Component { | ||
+ | constructor(props) { | ||
+ | super(props); | ||
+ | this.state = {count: props.initialCount}; | ||
+ | } | ||
+ | // ... | ||
+ | } | ||
+ | |||
+ | </syntaxhighlight>يجب عليك مع الدالة <code>createReactClass()</code> تزويدها بتابع <code>getInitialState</code> منفصل والذي يُعيد الحالة المبدئية:<syntaxhighlight lang="javascript"> | ||
+ | var Counter = createReactClass({ | ||
+ | getInitialState: function() { | ||
+ | return {count: this.props.initialCount}; | ||
+ | }, | ||
+ | // ... | ||
+ | }); | ||
+ | |||
+ | </syntaxhighlight> |
مراجعة 17:30، 14 أغسطس 2018
نُعرِّف عادةً مُكوّنات React كأصناف JavaScript مُجرَّدة:
class Greeting extends React.Component {
render() {
return <h1>أهلًا {this.props.name}</h1>;
}
}
إن لم تكن تستخدم ES6 بعد، فبإمكانك استخدام الوحدة create-react-class
بدلًا من ذلك:
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>أهلًا {this.props.name}</h1>;
}
});
تُشبِه واجهة برمجة التطبيقات لأصناف ES6 الصنف createReactClass()
مع بعض الاستثناءات.
تعريف الخاصيات الافتراضية
تُعرَّف الخاصيّات الافتراضيّة defaultProps
في أصناف ودوال ES6 كخاصيّة ضمن المُكوّن نفسه:
class Greeting extends React.Component {
// ...
}
Greeting.defaultProps = {
name: 'Mary'
};
أمّا باستخدام createReactClass()
فتحتاج لتعريف الدالة getDefaultProps()
كدالة ضمن الكائن المُمرَّر:
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'Mary'
};
},
// ...
});
تعيين الحالة المبدئية
في أصناف ES6 تستطيع تعريف الحالة المبدئية عن طريق تعيين this.state
في الدالة البانية:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}
يجب عليك مع الدالة createReactClass()
تزويدها بتابع getInitialState
منفصل والذي يُعيد الحالة المبدئية:
var Counter = createReactClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
// ...
});