React/components and props

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

تُشبِه المُكوِّنات من الناحية النظريّة دوال JavaScript، فهي تقبل مُدخَلات المستخدم (والتي تُدعى props اختصارًا للكلمة properties وتعني الخاصيّات) وتُعيد عناصر React تصف ما الذي ينبغي عرضه على الشّاشة.

مكونات الأصناف والدوال

إنّ أبسط طريقة لتعريف مُكوِّن هي كتابة دالة JavaScript:

function Welcome(props) {
  return <h1>أهلًا {props.name}</h1>;
}

تُعدّ هذه الدالة مُكوِّنًا صالحًا في React لأنّها تقبل وسيطًا واحدًا من خاصيّات الكائن props (اختصارًا للكلمة properties وتعني الخاصيّات) مع بياناته وتُعيد عنصر React. ندعو مثل هذه المُكوِّنات بالمُكوِّنات الداليّة (functional) لأنّها عبارة عن دوال JavaScript. بإمكانك أيضًا أن تستخدم الأصناف لتعريف المُكوِّنات كما يلي:

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

إنّ المُكوِّنين السابقين مُتكافِئان من وجهة نظر React.

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

تصيير الكائنات (Rendering)

لم نصادف حتى الآن إلّا عناصر React تُمثِّل عناصر DOM المُعتادة:

const element = <div />;

ولكن يُمكِن للعناصر أن تُمثِّل مُكوِّنات مُعرَّفة من قبل المستخدم:

const element = <Welcome name="سارة" />;

عندما تجد React عنصرًا يُمثِّل مُكوِّنًا مُعرَّفًا من قبل المستخدم، فستُمرِّر خاصيّات JSX إليه على شكل كائن وحيد، ندعو هذا الكائن props. على سبيل المثال تعرض هذه الشيفرة عبارة "أهلًا سارة" في الصّفحة:

function Welcome(props) {
  return <h1>أهلًا {props.name}</h1>;
}

const element = <Welcome name="سارة" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

جرِّب هذا المثال على موقع CodePen.

تلخيص ما حدث في هذا المثال:

1. نستدعي التّابع ReactDOM.render()‎ مع العنصر </ "سارة"=Welcome name>.
2. تستدعي React المُكوِّن Welcome مع تمرير {'سارة' :name} كخاصيّة props.
3. يُعيد العنصر Welcome العنصر ‏<h1/>أهلًا سارة<h1>‏ كنتيجة له.
4. تُحدِّث React DOM بكفاءة DOM ليُطابِق <h1/>أهلًا سارة<h1>.

ملاحظة: يجب أن تبدأ أسماء المُكوِّنات دومًا بأحرف كبيرة.

تُعامِل React المُكوِّنات التي تبدأ بأحرف صغيرة كعناصر DOM، على سبيل المثال يُمثِّل ‎

‎ عنصر HTML الذي يُدعى div، بينما تُمثِّل ‎<Welcome />‎ مُكوِّنًا في React وتتطلَّب أن يكون تعريف هذا المُكوِّن موجودًا ضمن المجال المُحدَّد.

بإمكانك قراءة المزيد عن المنطق الكامن وراء هذه الاتفاقيّة من هنا.

تركيب المكونات

يُمكِن للمُكوِّنات أن تشير إلى مُكوِّنات أخرى في ناتجها، يسمح لنا هذا باستخدام نفس المُكوِّن المُجرَّد لأي درجة من التفصيل، زر (button)، أو حقل إدخال (form)، أو مربّع حوار (dialog)، أو شاشة (screen)، ففي React يُعبَّر عنها جميعها بالمُكوِّنات.

على سبيل المثال يُمكننا إنشاء مُكوِّن اسمه App يعرض في ناتجه المُكوِّن Welcome عدّة مرّات: