KnowledgeCity

React.js: المكوّنات الوظيفية

في هذه الدورة، سنقوم بتغطية الهيكل، والخطافات أو Hooks ودوال دورة الحياة للمكونات الوظيفية، وكذلك كيفية استخدام الخطافات الأكثر استخدامًا مثل…

في هذه الدورة، سنقوم بتغطية الهيكل، والخطافات أو Hooks ودوال دورة الحياة للمكونات الوظيفية، وكذلك كيفية استخدام الخطافات الأكثر استخدامًا مثل useeffect و Usestate و Usecallback و UsemeMo.

مكونات React الوظيفية هي لبنة بناء أساسية من أي تطبيق react.js. أنها تسمح للمطورين بإنشاء مكونات واجهة المستخدم قابلة لإعادة الاستخدام، عديمة الحالة باستخدام بناء جملة قائم على الدالة. في هذه الدروس، سوف نناقش بمزيد من التفصيل البنية، والخطافات، ودوال دورة الحياة للمكونات الوظيفية، بما في ذلك كيفية تحديد الخاصيات واستخدامها، وكيفية إدارة الحالة باستخدام Hooks.

تختلف بنية المكونات الوظيفية عن مكونات الفئة، لأنها لا تعتمد على بناء جملة قائم على الفئة. بدلاً من ذلك، يأخذون الخاصيات كمعلمة وإرجاع JSX كإخراج. سوف نستكشف تشريح المكون الوظيفي، بما في ذلك كيفية تحديد الخاصيات واستخدامها، وكيفية استخدام خطاف Usestate لإدارة حالة المكون، وكيفية تقديم JSX.

تعد الخطافات مفهومًا قويًا في مكونات React الوظيفية، مما يسمح للمطورين بإضافة الحالة والوظائف الأخرى إلى المكونات القائمة على الدوال. سوف نستكشف الخطافات الأكثر استخدامًا في React بما في ذلك useeffect و Usestate و Usecallback و Usememo.

أهداف الدورة التدريبية:

  • فهم مكونات React الوظيفية
  • فهم Hooks في React
  • فهم الخاصيات في React

المدرّب: Tony Davydets

المدّة: 26m · 6 دروس
المستوى: Beginner
اللغة: العربية

المهارات التي ستكتسبها

مكتبات المكوناتبرمجة وظيفيةمكونات HTMLرد فعل JsxReactstrapReact.js (مكتبة جافا سكريبت)

ما ستتعلمه

  • فهم بنية مكونات React الوظيفية وكيف تختلف عن المكونات الفئوية
  • تعريف واستخدام props كمعاملات وإرجاع JSX كمخرجات
  • إدارة حالة المكون باستخدام خطاف useState
  • تطبيق خطافات React الشائعة بما في ذلك useEffect وuseState وuseCallback وuseMemo
  • استكشاف الخطافات ووظائف دورة الحياة للمكونات الوظيفية

النقاط الرئيسية

  • تعد مكونات React الوظيفية لبنة أساسية في أي تطبيق React.js، مما يسمح للمطورين بإنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام وخالية من الحالة باستخدام صيغة تعتمد على الوظائف.
  • على عكس المكونات الفئوية، لا تعتمد المكونات الوظيفية على صيغة تعتمد على الفئات؛ فهي تستقبل props كمعامل وترجع JSX كمخرجات.
  • تسمح الخطافات للمطورين بإضافة الحالة والوظائف الأخرى إلى المكونات المعتمدة على الوظائف.
  • خطافات التشغيل الأكثر استخداماً والتي يغطيها المساق هي useEffect وuseState وuseCallback وuseMemo.
  • يغطي المساق تعريف واستخدام props، وإدارة الحالة باستخدام خطاف useState، وعرض JSX.

الأسئلة الشائعة

ماذا يغطي هذا المساق؟

يغطي المساق البنية، والخطافات، ووظائف دورة الحياة لمكونات React الوظيفية، بما في ذلك كيفية تعريف واستخدام props، وكيفية إدارة الحالة باستخدام خطاف useState، وكيفية استخدام الخطافات الشائعة مثل useEffect وuseState وuseCallback وuseMemo.

ما هي المهارات التي سأكتسبها من هذا المساق؟

ستكتسب مهارات في مكتبات المكونات، والبرمجة الوظيفية، ومكونات HTML، و React JSX، و Reactstrap، ومكتبة لغة الجافا سكريبت React.js.

كيف تختلف المكونات الوظيفية عن المكونات الفئوية؟

لا تعتمد المكونات الوظيفية على صيغة فئوية. بدلاً من ذلك، فإنها تستقبل props كمعامل وترجع JSX كمخرجات.

ما هي الخطافات التي يغطيها هذا المساق؟

يستكشف المساق الخطافات الأكثر استخداماً في React، بما في ذلك useEffect وuseState وuseCallback وuseMemo.

ما هي أهداف التعلم لهذا المساق؟

تتمثل أهداف التعلم في فهم مكونات React الوظيفية، وخطافات React، و React props.

النص

النص

مرحبا، اسمي توني، وفي. هذه الدروس سوف تتعلم عن المكونات الوظيفية والهيكل و Hooks. في هذا الدرس، سأوضح لك ما هي المكونات الوظيفية. الآن، منذ فترة طويلة، كان يُنظر إلى المكونات الوظيفية على أنها مكونات أقل مقارنة بنظيرها القائم على أساس الفئة. وذلك لأن المكونات القائمة على الفئة كانت تعتبر كاملة. كان لديهم إمكانية الوصول إلى أشياء مثل الحالة كان يُنظر إلى المكونات الوظيفية على أنها مكونات خفيفة الوزن عديمة الحالة. ولكن مع الإضافة الأخيرة لدوال Hooks مثل حالة الاستخدام UseState و Hooks الأخرى مثل تأثير الاستخدام UseEffect فقد كشف هذا بشكل أكبر المكونات الوظيفية لدوال دورة الحياة التي قد تكون متاحة فقط لنظيراتها المستندة إلى الفئة. دعنا نلقي نظرة على المكون الأصلي الذي نستخدمه لتقديم تطبيقنا. الآن، أولاً وقبل كل شيء، يمكننا أن نرى. أننا نستخدم دالتين خاصتين تسمى حالة الاستخدام. يتم توفيرها لنا من خلال مجموعة React ويكشفون مكون وظيفي. إلى الوظائف التي قد تكون متاحة فقط لنظيرتها القائمة على الفئة في الإصدارات السابقة من React. لذا، لأننا نستخدم دالة usetate فهذه الدالة خاصة. وتسمى هوك Hook. هناك دوال معينة تأتي من مجموعة React بخلاف React وعندما يتم استخدامها داخل مكون وظيفي، يعرضون هذا المكون الوظيفي لنفس الوظيفة التي قد تقتصر فقط على نظيرتها القائمة على الفئة. الآن، من المفترض أن تكون المكونات الوظيفية مرنة للغاية. يمكنك أن ترى أن المكون الأصلي لدينا لم يتبقى أي من الخاصيات، بطبيعة الحال، الذي يقف سببا. ولكن على سبيل المثال، يتم استقبال مكون أصغر أو فرعي نستخدمه داخل المكون الأصلي، وهو مكون التطبيق الذي يتلقى بعض الخاصيات. إنه ليس ضروريًا، ولكنه شيء مفيد حقًا في مكون وظيفي. منذ تقديم Hooks، أصبحت المكونات القائمة على الفئات في طريقها للخروج من نظام React البيئي. وإذا كنت تتعامل مع إطار عمل أحدث بطبيعته، يمكنك أن ترى أنه يتم استبدال المكونات القائمة على الفئة بمكونات وظيفية. وهذا يجب أن يتعلق بشكل كبير بالأداء، بالطريقة التي يتم بها رفع الأشياء بعد بناء الحزمة. لن ندخل في كل ذلك الآن. ولكن دعنا نقول فقط أن المكونات الوظيفية هي معادل أكثر حداثة لنظيرتها القائمة على الفئة. على الرغم من أن تلك القائمة على أساس الفئة لا تزال موجودة إلى حد كبير ويتم استخدامها وأصبحت المكونات الوظيفية الآن أكثر بروزا بسبب التقديم الذي حدث مؤخرا ل Hooks بواسطة مجموعة React. في درسنا التالي، سنلقي نظرة على ما هي Hooks وما هي دوال دورة الحياة الأخرى التي يمكننا الكشف عنها من خلال استخدام Hooks. شكرا لمشاهدتك.

التعلّم أثناء التنقّل

تعلّم أينما كنت — يتيح لك تطبيق KnowledgeCity للجوّال مشاهدة الدروس أثناء التنقّل.