3.0 KiB
3.0 KiB
title | localeTitle |
---|---|
Functional Components vs Class Components | المكونات الوظيفية مقابل مكونات Class |
المكونات الوظيفية مقابل مكونات Class
هناك مكونان رئيسيان في React:
- مكونات وظيفية
- مكونات الطبقة
مكونات وظيفية
- المكونات الوظيفية هي وظائف JavaScript الأساسية. هذه هي عادة وظائف الأسهم ولكن يمكن أيضا أن يتم إنشاؤها باستخدام الكلمة الأساسية
function
العادية. - يشار إليها أحيانًا بمكونات "البكم" أو "عديمة الجنسية" لأنها تقبل البيانات ببساطة وتعرضها بشكل ما ؛ هذا هو المسؤول الرئيسي عن تقديم واجهة المستخدم.
- لا يمكن استخدام أساليب دورة الحياة التفاعلية (على سبيل المثال ،
componentDidMount
) في المكونات الوظيفية. - لا توجد طريقة تجسيد مستخدمة في المكونات الوظيفية.
- وهي مسؤولة بشكل أساسي عن واجهة المستخدم وهي عادةً ما تكون معروضة فقط (على سبيل المثال ، مكون زر).
- يمكن للمكونات الوظيفية قبول الدعائم واستخدامها.
- يجب تفضيل المكونات الوظيفية إذا لم تكن بحاجة إلى استخدام حالة React.
`import React from "react";
const Person = props => (
Hello, {props.name}
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; `