الفرق بين المراجعتين لصفحة: «React/react api»

مراجعة 07:59، 5 سبتمبر 2018

إنّ الكائن React هو نقطة الدخول إلى مكتبة React. إن حمّلت React عن طريق العنصر ‎<script>‎ فستكون هذه الواجهة ذات المستوى الأعلى متوفرة عبر الكائن العام React. وإن استخدمت ES6 مع npm فتستطيع كتابة ‎import React from 'react'‎. إن استخدمت ES5 مع npm فتستطيع كتابة ‎var React = require('react')‎.

لمحة عامة

المكوّنات

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

React.Component.
React.PureComponent.

إن لم تكن تستخدم أصناف ES6 فبإمكانك استخدام الوحدة create-react-class. انظر إلى استخدام React بدون ES6 للمزيد من المعلومات.

إنشاء عناصر React

نوصي باستخدام JSX لوصف مظهر واجهة المستخدم لديك. كل عنصر في JSX هو مجرّد تعبير بديل لاستدعاء التابع React.createElement()‎. لن تضطر بشكل اعتيادي إلى استدعاء التوابع التالية بشكل مباشر إن كنت تستخدم JSX:

createElement()‎.
createFactory()‎.

انظر إلى استخدام React بدون JSX للمزيد من المعلومات.

تحويل العناصر

يُزوّدنا الكائن React بالعديد من واجهات برمجة التطبيقات (APIs) للتعامل مع العناصر:

cloneElement()‎.
isValidElement()‎.
React.Children.

الأجزاء (Fragments)

تُزوِّدنا React أيضًا بمكوّن لتصيير عدة عناصر بدون مُغلِّف له.

React.Fragment.

المراجع (Refs)

React.createRef.
React.forwardRef.

مرجع

`React.Component`

إنّ React.Component هو عبارة عن الصنف الأساسي لمكوّنات React عند تعريفها باستخدام أصناف ES6:

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

انظر إلى مرجع React.Component API للحصول على قائمة بالتوابع والخاصيّات المرتبطة بالصنف React.Component الأساسي.

`React.PureComponent`

يُشبه React.PureComponent الصنف React.Component. الفرق بينهما هي عدم اعتماد الصنف React.Component للتابع shouldComponentUpdate()‎ بينما يعتمده React.PureComponent مع مقارنة ضئيلة بين الخاصيّات والحالة.

إن كان تابع التصيير render()‎ للمكوّن يُصيّر نفس النتيجة عند إعطاء نفس الخاصيّات والحالة فتستطيع استخدام React.PureComponent لتحسين الأداء في بعض الحالات.

ملاحظة: يُقارِن التابع shouldComponentUpdate()‎ الخاص بالصنف React.PureComponent مقارنة ضئيلة فقط بين الكائنات، فإن كانت تحتوي على بنى معطيات معقدة فقد يُنتِج سلبيات كاذبة للمقارنات الأعمق. يجب الامتداد إلى الصنف PureComponent فقط عندما تتوقع امتلاك حالة وخاصيّات بسيطة، أو استخدم التابع forceUpdate()‎ عندما تعلم بتغيّر بنى المعطيات العميقة، أو انظر في استخدام الكائنات غير القابلة للتعديل لتسهيل المقارنات السريعة بين البيانات المتداخلة.

يتخطى التابع shouldComponentUpdate()‎ أيضًا تحديث الخاصيّات لكامل الشجرة الفرعية للمكوّن، احرص على أن تكون المكوّنات الأبناء له أيضًا نقيّة.

@@ سطر 33: / سطر 33: @@
 === <code>React.Component</code> ===
-إنّ <code>React.Component</code> هو عبارة عن الصنف الأساسي لمكوّنات React عند تعريفها باستخدام أصناف ES6:
+إنّ <code>React.Component</code> هو عبارة عن الصنف الأساسي لمكوّنات React عند تعريفها باستخدام أصناف ES6:<syntaxhighlight lang="javascript">
+class Greeting extends React.Component {
+  render() {
+    return <h1>أهلًا {this.props.name}</h1>;
+  }
+}
+</syntaxhighlight>انظر إلى مرجع <code>React.Component</code> API للحصول على قائمة بالتوابع والخاصيّات المرتبطة بالصنف <code>React.Component</code> الأساسي.
+=== <code>React.PureComponent</code> ===
+يُشبه <code>React.PureComponent</code> الصنف <code>React.Component</code>. الفرق بينهما هي عدم اعتماد الصنف <code>React.Component</code> للتابع <code>shouldComponentUpdate()</code>‎ بينما يعتمده <code>React.PureComponent</code> مع مقارنة ضئيلة بين الخاصيّات والحالة.
+إن كان تابع التصيير <code>render()</code>‎ للمكوّن يُصيّر نفس النتيجة عند إعطاء نفس الخاصيّات والحالة فتستطيع استخدام <code>React.PureComponent</code> لتحسين الأداء في بعض الحالات.
+'''ملاحظة:''' يُقارِن التابع <code>shouldComponentUpdate()‎</code> الخاص بالصنف <code>React.PureComponent</code> مقارنة ضئيلة فقط بين الكائنات، فإن كانت تحتوي على بنى معطيات معقدة فقد يُنتِج سلبيات كاذبة للمقارنات الأعمق. يجب الامتداد إلى الصنف <code>PureComponent</code> فقط عندما تتوقع امتلاك حالة وخاصيّات بسيطة، أو استخدم التابع <code>forceUpdate()‎</code> عندما تعلم بتغيّر بنى المعطيات العميقة، أو انظر في استخدام الكائنات غير القابلة للتعديل لتسهيل المقارنات السريعة بين البيانات المتداخلة.
+يتخطى التابع <code>shouldComponentUpdate()‎</code> أيضًا تحديث الخاصيّات لكامل الشجرة الفرعية للمكوّن، احرص على أن تكون المكوّنات الأبناء له أيضًا نقيّة.
+== <code>createElement()‎</code> ==