واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React

إنّ الكائن 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()‎ أيضًا تحديث الخاصيّات لكامل الشجرة الفرعية للمكوّن، احرص على أن تكون المكوّنات الأبناء له أيضًا نقيّة.

createElement()‎

React.createElement(
  type,
  [props],
  [...children]
)

يُنشِئ ويُعيد عنصر React جديد من النوع المُعطى. يُمكِن للوسيط type أن يكون إمّا سلسلة نصيّة لاسم العنصر (مثل ‎'div'‎ أو ‎'span'‎)، أو نوع لمكوّن React (مثل صنف أو دالة)، أو نوع لجزء React (أي fragment).

تُحوَّل الشيفرة المكتوبة باستخدام JSX إلى استدعاءات للتابع React.createElement()‎. لن تستدعي هذا التابع بشكل مباشر عادةً إن كنت تستخدم JSX. انظر إلى استخدام React بدون JSX لتعلم المزيد.

cloneElement()‎

React.cloneElement(
  element,
  [props],
  [...children]
)

ينسخ ويُعيد عنصر React جديد باستخدام الوسيط element كنقطة بداية. يمتلك العنصر الناتج نفس خاصيّات العنصر الأصلي مع دمج الخاصيّات الجديد. سيحل العناصر الأبناء المُقدمين عبر الوسيط children محل العناصر الأبناء الحاليين. سيُحتفَظ بالمفتاح key والمرجع ref من العنصر الأصلي. يُكافِئ التابع React.cloneElement()‎ كتابة ما يلي:

<element.type {...element.props} {...props}>{children}</element.type>

ولكن يُحافِظ استخدام التابع على المرجع ref أيضًا. يعني هذا أنّه لو كان لديك عنصر ابن مع مرجع ref ضمنه، فلن تأخذه عن طريق الخطأ من العنصر السليف له، بل ستحصل على نفس المرجع مُرفقًا بعنصرك الجديد.

قُدِّمت هذه الواجهة (ِAPI) كبديل للتابع React.addons.cloneWithProps()‎ المُهمَل.

createFactory()‎

React.createFactory(type)

يُعيد دالة تُنتِج عناصر React من النوع المُعطى. وكما هو الحال مع التابع React.createElement()‎ يُمكِن للوسيط type أن يكون إمّا سلسلة نصيّة لاسم العنصر (مثل ‎'div'‎ أو ‎'span'‎)، أو نوع لمكوّن React (مثل صنف أو دالة)، أو نوع لجزء React (أي fragment).

يُعتبَر هذا التابع قديمًا في React ونوصي باستخدام JSX أو التابع React.createElement()‎ بشكل مباشر بدلًا من ذلك.

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

isValidElement()‎

React.isValidElement(object)

يتحقّق من أنّ الكائن هو عنصر React. يُعيد القيمة true أو false.

React.Children

يُزوّدنا React.Children بأدوات مساعدة للتعامل مع بنية المعلومات this.props.children.

React.Children.map

React.Children.map(children, function[(thisArg)])

يستدعي دالة لكل عنصر ابن مباشر موجود ضمن children مع تعيين this إلى قيمة thisArg. إن كان children عبارة عن جزء (fragment) مع مفتاح أو مصفوفة فلن تُمرَّر الدالة للكائن الحاوي. إن كانت قيمة children هي null أو undefined فسيُعيد null أو undefined بدلًا من المصفوفة.

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

مماثل للتابع React.Children.map()‎ ولكن لا يُعيد مصفوفة.

React.Children.count

React.Children.count(children)

يُعيد العدد الكلي للمكوّنات الموجود ضمن children، مُكافئ لعدد المرات التي يُمرَّر فيها رد النداء إلى map أو التي يُستدعى فيها forEach.

React.Children.only

React.Children.only(children)

يتحقّق من أنّ children يمتلك فقط ابنًا واحدًا (عنصر React) ويُعيده. فيما عدا ذلك سيرمي هذا التابع خطأً.

ملاحظة: لا يقبل التابع React.Children.only()‎ القيمة المُعادة من React.Children.map()‎ لأنّها مصفوفة وليست عنصر React.

React.Children.toArray

React.Children.toArray(children)

يُعيد بنية البيانات children كمصفوفة مع تعيين مفتاح لكل عنصر ابن. يكون مفيدًا إن أردت التعامل مع مجموعة من العناصر الأبناء في توابع التصيير لديك، خاصّة إن أردت إعادة ترتيب أو تجزئة this.props.children قبل تمريره.

ملاحظة: يُغيّر التابع React.Children.toArray()‎ المفاتيح ليُحافظ على دلالات المصفوفات المتداخلة عند تبسيط قائمة من العناصر الأبناء. حيث يضع كل مفتاح قبل العنصر في المصفوفة المُعادة بحيث يكون المجال لمفتاح كل عنصر هو مصفوفة الدخل التي تحتويه.

React.Fragment

يُتيح لك مكوّن الأجزاء React.Fragment أن تُعيد عناصر متعددة في التابع render()‎ بدون إنشاء عناصر DOM إضافيّة:

render() {
  return (
    <React.Fragment>
      نص ما
      <h2>ترويسة</h2>
    </React.Fragment>
  );
}

تستطيع أيضًا استخدامه عن طريق الصياغة المختصرة ‎<></>‎. للمزيد من المعلومات انظر إلى تحسين الدعم للأجزاء في إصدار React v16.2.0.

React.createRef

يُنشِئ React.createRef مرجعًا ref والذي يُمكِن إرفاقه إلى عناصر React عبر الخاصيّة ref:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

React.forwardRef

يُنشِئ React.forwardRef مكوّن React يُمرِّر خاصيّة المرجع ref التي يستقبلها إلى مكوّن آخر أدنى منه في الشجرة. هذه التقنية ليست شائعة كثيرًا ولكنّها مفيدة بشكل خاص في حالتين:

• تمرير المراجع إلى مكوّنات DOM.
• تمرير المراجع في المكوّنات ذات الترتيب الأعلى.

تقبل React.forwardRef دالة تصيير كوسيط لها. ستستدعي React هذه الدالة مع الخاصيّات props والمرجع ref كوسيطين لها. يجب أن تُعيد هذه الدالة عقدة React:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
// تستطيع الآن الحصول على مرجع بشكل مباشر إلى زر DOM
const ref = React.createRef();
<FancyButton ref={ref}>انقر هنا</FancyButton>;

في المثال السابق تُمرِّر React مرجعًا ref إلى العنصر ‎<FancyButton ref={ref}>‎ كوسيطٍ ثانٍ لدالة التصيير بداخل الاستدعاء React.forwardRef. تُمرِّر دالة التصيير هذه المرجع ref إلى العنصر ‎<button ref={ref}>‎.

كنتيجة لذلك بعد إرفاق React للمرجع، سيُشير ref.current بشكلٍ مباشر إلى نسخة العنصر ‎<button>‎.

للمزيد من المعلومات انظر إلى تمرير المراجع في توثيق React.

انظر أيضًا

• واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React
• الصنف React.Component
• الكائن ReactDOM
• الكائن ReactDOMServer
• عناصر DOM
• الأحداث المصطنعة (Synthetic Events)
• أدوات الاختبار
• التصيير السطحي (Shallow Rendering)
• مصير الاختبار (Test Renderer)
• متطلبات بيئة JavaScript

 مصادر

• صفحة واجهة برمجة التطبيق (API) ذات المستوى الأعلى في توثيق React الرسمي.