freeCodeCamp/guide/arabic/react/functional-components-vs-class-components/index.md

title, localeTitle

title	localeTitle
Functional Components vs Class Components	المكونات الوظيفية مقابل مكونات Class

المكونات الوظيفية مقابل مكونات Class

هناك مكونان رئيسيان في React:

• مكونات وظيفية
• مكونات الطبقة

مكونات وظيفية

• المكونات الوظيفية هي وظائف JavaScript الأساسية. هذه هي عادة وظائف الأسهم ولكن يمكن أيضا أن يتم إنشاؤها باستخدام الكلمة الأساسية function العادية.
• يشار إليها أحيانًا بمكونات "البكم" أو "عديمة الجنسية" لأنها تقبل البيانات ببساطة وتعرضها بشكل ما ؛ هذا هو المسؤول الرئيسي عن تقديم واجهة المستخدم.
• لا يمكن استخدام أساليب دورة الحياة التفاعلية (على سبيل المثال ، componentDidMount ) في المكونات الوظيفية.
• لا توجد طريقة تجسيد مستخدمة في المكونات الوظيفية.
• وهي مسؤولة بشكل أساسي عن واجهة المستخدم وهي عادةً ما تكون معروضة فقط (على سبيل المثال ، مكون زر).
• يمكن للمكونات الوظيفية قبول الدعائم واستخدامها.
• يجب تفضيل المكونات الوظيفية إذا لم تكن بحاجة إلى استخدام حالة React.

import React from "react";

const Person = props => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);

export default Person;

مكونات الطبقة

• تستفيد مكونات الفئة من فئة ES6 وتمتد فئة Component في React.
• تُسمى أحيانًا المكونات "الذكية" أو "ذات الحالة" لأنها تميل إلى تطبيق المنطق والدولة.
• يمكن استخدام أساليب دورة الحياة التفاعلية داخل مكونات الفئة (على سبيل المثال ، componentDidMount ).
• يمكنك تمرير الدعائم لأسفل إلى مكونات الفصل والوصول إليها باستخدام this.props

`import React, { Component } from "react";

class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } }

render() { return (

Hello Person

); } }

export default Person; `

معلومات اكثر

• React Components
• مكونات وظيفية مقابل فئة
• مقابل مقابل مكونات وظيفية عديم الحالة في رد الفعل
• الدولة ودورة الحياة