عرض مصدر React/components and props

<noinclude>{{DISPLAYTITLE:المكونات والخاصيات في React}}</noinclude>
تتيح لنا المُكوِّنات (Components) تقسيم واجهة المستخدم إلى قطع مُستقِلَّة قابلة لإعادة الاستخدام، والتفكير بكل قطعة على انفراد. سنتحدّث في هذه الصفحة عن مُقدّمة إلى مفهوم المُكوِّنات، بإمكانك أن تجد مرجعًا مُفصَّلًا حول واجهة برمجة التطبيق (API) الخاصّة بالمُكوِّنات [[React/react component|من هنا]].

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

== مكونات الأصناف والدوال ==
إنّ أبسط طريقة لتعريف مُكوِّن هي كتابة دالة JavaScript:<syntaxhighlight lang="javascript">
function Welcome(props) {
  return <h1>أهلًا {props.name}</h1>;
}
</syntaxhighlight>تُعدّ هذه الدالة مُكوِّنًا صالحًا في React لأنّها تقبل وسيطًا واحدًا من خاصيّات الكائن <code>props</code> (اختصارًا للكلمة properties وتعني الخاصيّات) مع بياناته وتُعيد عنصر React. ندعو مثل هذه المُكوِّنات بالمُكوِّنات الداليّة (functional) لأنّها عبارة عن دوال JavaScript.

بإمكانك أيضًا أن تستخدم [[JavaScript/class|الأصناف]] لتعريف المُكوِّنات كما يلي:<syntaxhighlight lang="javascript">
class Welcome extends React.Component {
  render() {
    return <h1>أهلًا {this.props.name}</h1>;
  }
}
</syntaxhighlight>إنّ المُكوِّنين السابقين مُتكافِئان من وجهة نظر React.

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

== تصيير المكوّنات (Rendering) ==
لم نصادف حتى الآن إلّا عناصر React تُمثِّل عناصر DOM المُعتادة:<syntaxhighlight lang="javascript">
const element = <div />;
</syntaxhighlight>ولكن يُمكِن للعناصر أن تُمثِّل مُكوِّنات مُعرَّفة من قبل المستخدم:<syntaxhighlight lang="javascript">
const element = <Welcome name="سارة" />;
</syntaxhighlight>عندما تجد React عنصرًا يُمثِّل مُكوِّنًا مُعرَّفًا من قبل المستخدم، فستُمرِّر خاصيّات JSX إليه على شكل كائن وحيد، ندعو هذا الكائن <code>props</code>.

على سبيل المثال تعرض هذه الشيفرة عبارة <code>"أهلًا سارة"</code> في الصّفحة:<syntaxhighlight lang="javascript">
function Welcome(props) {
  return <h1>أهلًا {props.name}</h1>;
}

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

</syntaxhighlight>[https://reactjs.org/redirect-to-codepen/components-and-props/rendering-a-component جرِّب هذا المثال على موقع CodePen].

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

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

بإمكانك قراءة المزيد عن المنطق الكامن وراء هذه الاتفاقيّة [[React/jsx in depth|من هنا]].

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

على سبيل المثال يُمكننا إنشاء مُكوِّن اسمه <code>App</code> يعرض في ناتجه المُكوِّن <code>Welcome</code> عدّة مرّات:<syntaxhighlight lang="javascript">
function Welcome(props) {
  return <h1>أهلًا {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="سارة" />
      <Welcome name="محمد" />
      <Welcome name="عبد الله" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

</syntaxhighlight>[https://reactjs.org/redirect-to-codepen/components-and-props/composing-components جرِّب المثال على موقع CodePen].

تحتوي تطبيقات React الجديدة عادةً على المُكوِّن <code>App</code> في المستوى الأعلى وتنحدر عنه باقي المُكوِّنات، ولكن إن كنت تدمج React مع تطبيق موجود مُسبقًا فقد تبدأ من المستوى السفلي بمُكوِّن صغير مثل الزر <code>Button</code> وتصعد تدريجيًّا حتى المستوى الأعلى في هيكليّة التطبيق.

== استخراج المكونات ==
لا تتردد بتقسيم المُكوِّنات إلى مُكوِّنات أصغر. على سبيل المثال انظر إلى مُكوِّن التعليقات <code>Comment</code> التالي:<syntaxhighlight lang="javascript">
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
</syntaxhighlight>[https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components جرِّب المثال على موقع CodePen].

يقبل هذا المُكوِّن الكائن <code>author</code>، والسلسلة النصيّة <code>text</code>، والتاريخ <code>date</code> كخاصيات <code>props</code> له، ويُمثِّل تعليقًا على مواقع التواصل الاجتماعي.

من الصعب تغيير هذا المُكوِّن بسبب هذه التداخلات، ومن الصعب أيضًا إعادة استخدام أجزاء منه، فلنحاول استخراج بعض المُكوِّنات منه.

سنستخرج في البداية مُكوِّن الصورة الرمزيّة <code>Avatar</code>:<syntaxhighlight lang="javascript">
function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />

  );
}
</syntaxhighlight>لا يحتاج المُكوِّن <code>Avatar</code> إلى معرفة أنّه مُستخدَم في المُكوِّن <code>Comment</code>، ولذلك أعطينا خاصيّاته (<code>props</code>) اسمًا أكثر عموميّةً وهو <code>user</code> بدلًا من <code>author</code>. حيث نوصي بتسمية الخاصيّات <code>props</code> من وجهة نظر المُكوِّن نفسه وليس في السياق الذي تُستخدَم فيه.

بإمكاننا الآن تبسيط المُكوِّن <code>Comment</code> قليلًا:<syntaxhighlight lang="javascript">
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

</syntaxhighlight>سنستخرج الآن مُكوِّن معلومات المستخدم <code>UserInfo</code> والذي يعرض المُكوِّن <code>Avatar</code> بجانب اسم المستخدم:<syntaxhighlight lang="javascript">
function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

</syntaxhighlight>يُتيح لنا هذا تبسيط المُكوِّن <code>Comment</code> أكثر:<syntaxhighlight lang="javascript">
function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

</syntaxhighlight>[https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components-continued جرِّب المثال على موقع CodePen].

يبدو استخراج المُكوِّنات في البداية عملًا مجهدًا، ولكن سنرى الفائدة الكبيرة لامتلاك عدّة مُكوِّنات قابلة لإعادة الاستخدام عند بناء تطبيقات كبيرة. القاعدة هنا هي: إن استخدمنا أجزاء واجهة المستخدم عدّة مرّات (مثل الزر <code>Button</code>، و اللوحة <code>Panel</code>، والصورة الرمزيّة <code>Avatar</code>)، أو كانت هذه الأجزاء مُعقّدة بحد ذاتها (مثل مُكوِّن التطبيق <code>App</code>، و <code>FeedStory</code>، والتعليق <code>Comment</code>)، فهي مُرشَّحة بشكل كبير لأن نجعلها مُكوِّنات قابلة لإعادة الاستخدام.

== الخاصيات props قابلة للقراءة فقط ==
لا يجب تعديل خاصيّات المُكوِّنات، سواءً صرّحنا عنها [[React/components and props|كدالة أو كصنف]]، فلنأخذ هذا المثال عن دالة الجمع <code>sum</code>:<syntaxhighlight lang="javascript">
function sum(a, b) {
  return a + b;
}
</syntaxhighlight>تُدعى هذه الدوال بالدوال النقيّة (Pure Functions) لأنّها لا تحاول تغيير مُدخلاتها وتُعيد دومًا نفس النتيجة لنفس المُدخلات.

وعلى العكس من ذلك نجد أنّ هذه الدالة غير نقية لأنّها تُغيِّر مُدخلاتها:<syntaxhighlight lang="javascript">
function withdraw(account, amount) {
  account.total -= amount;
}

</syntaxhighlight>إنّ React مرنة جدًّا ولكن لديها قاعدة واحدة صارمة وهي:

يجب أن تسلك مُكوِّنات React سلوك الدوال النقيّة مع احترامها لخاصيّاتها (<code>props</code>).

تتغيّر واجهات المستخدم الخاصّة بالتطبيق مع الزمن بالطبع، سنتحدّث في قسم [[React/state and lifecycle|حالة ودورة حياة المُكوِّنات]] حول مفهوم جديد وهو الحالة (state)، حيث تسمح الحالة لمُكوِّنات React بتغيير ناتجها مع مرور الزمن استجابةً لتفاعل المستخدم، والردود القادمة من الشبكة، وأي شيء آخر، بدون خرق هذه القاعدة.
== انظر أيضًا ==
* [[React/hello world|مثال أهلًا بالعالم في React]]
* [[React/introducing jsx|مقدمة إلى JSX]]
* [[React/rendering elements|تصيير العناصر]]
* [[React/state and lifecycle|حالة ودورة حياة المكونات]]
* [[React/handling events|معالجة الأحداث في React]]
* [[React/conditional rendering|التصيير الشرطي]]
* [[React/lists and keys|القوائم والمفاتيح]]
* [[React/forms|الحقول]]
* [[React/lifting state up|رفع الحالات المشتركة للمستوى الأعلى]]
* [[React/composition vs inheritance|الفرق بين التركيب والوراثة في React]]
* [[React/thinking in react|أسلوب التفكير في React]]

== مصادر ==
* [https://reactjs.org/docs/components-and-props.html صفحة المكونات والخاصيّات في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React Main Concepts]]