كيفية استخدام المكونات الوظيفية في React

هل تساءلت عن كيفية إنشاء مكون في React؟

للإجابة ، الأمر بسيط مثل إنشاء دالة تعرض بنية تشبه HTML.

import React from 'react'; function Counter({n}) { return ( {n} ); } export default Counter;

الآن دعنا نرى ما حدث في الكود أعلاه.  Counterهي وظيفة تحول رقمًا إلى HTML. وإذا نظرت بعناية أكبر ، Counterفهذه وظيفة نقية. هذا صحيح ، نوع الوظيفة التي ترجع النتيجة بناءً على مدخلاتها وليس لها آثار جانبية.

يأتي هذا التفسير بسؤال جديد. ما هي الآثار الجانبية؟

باختصار ، التأثير الجانبي هو أي تعديل على البيئة خارج الوظيفة أو أي معلومات قراءة من البيئة الخارجية يمكن أن تتغير.

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

إليك كيفية تعيين nالمعلمة من أي مكون آخر:

بمعنى ما ، يمكن تخيل بناء الجملة هذا كمكالمة دالة Counter({n: 1}). أليس هذا صحيحا؟

دعنا نكمل رحلتنا.

هل يمكن أن يكون للمكونات الوظيفية حالة؟ كما اقترح اسم المكون ، أريد تخزين العداد وتغييره. ماذا لو أعلنا للتو عن متغير يحمل رقمًا داخل المكون؟ هل ستعمل؟

هيا نكتشف.

سأبدأ بالإعلان عن المتغير داخل المكون الوظيفي.

import React from 'react'; function Counter() { let n = 0; return ( {n} ); } export default Counter;

الآن دعنا نضيف الوظيفة التي تزيد الرقم وتسجيله في وحدة التحكم. سأستخدم الوظيفة كمعالج الحدث لحدث النقر.

import React from 'react'; function Counter() { let n = 0; function increment(){ n = n + 1; console.log(n) } return ( {n} Increment ); } export default Counter;

إذا نظرنا إلى وحدة التحكم ، نرى أن الرقم قد زاد بالفعل ، لكن هذا لا ينعكس على الشاشة. أيه أفكار؟

لقد فهمت الأمر بشكل صحيح ... نحتاج إلى تغيير الرقم ، لكننا نحتاج أيضًا إلى إعادة عرضه على الشاشة.

هنا يأتي دور الوظيفة المساعدة من React Hooks. بالمناسبة ، تسمى هذه الوظائف المساعدة الخطافات وتبدأ بكلمة "استخدام". سنستخدم واحدًا منهم ، useState. سأقوم أيضًا بتسجيل نص "إعادة التصيير" لوحدة التحكم لمعرفة عدد المرات التي Counterيتم فيها استدعاء الوظيفة بالفعل.

import React, { useState } from 'react'; function Counter() { const [n, setN] = useState(0); console.log('re-render'); function increment(){ setN(n + 1); console.log(n) } return ( {n} Increment ); } export default Counter;

دعونا نقرأ ماذا useState()يفعل.

ماذا useStateيعود؟ تقوم بإرجاع زوج من القيم: الحالة الحالية والدالة التي تقوم بتحديثها.

في حالتنا nهي الحالة الحالية setN()وهي الوظيفة التي تقوم بتحديثها. هل راجعت وحدة التحكم لمعرفة عدد مرات عرض نص "إعادة التصيير"؟ سأترك هذا لك لمعرفة ذلك.

يمكننا تحديث الحالة ليس فقط عن طريق تعيين القيمة الجديدة ولكن أيضًا من خلال توفير وظيفة تُرجع القيمة الجديدة.

في حالتنا ، سيتم استدعاء الوظيفة التي توفر القيمة الجديدة increment(). كما ترى ، increment()هي وظيفة خالصة.

import React, { useState } from 'react'; function increment(n){ return n + 1; } function Counter() { const [n, setN] = useState(0); return ( {n}  setN(increment)}> Increment ); } export default Counter;

لفهم ما setN(increment)يفعل ، دعنا نقرأ الوثائق.

يتيح لك تمرير وظيفة التحديث الوصول إلى قيمة الحالة الحالية داخل المحدث.

حسنًا ، increment()يتم استدعاؤه nبالحالة الحالية ويتم استخدامه لحساب قيمة الحالة الجديدة.

افكار اخيرة

دعونا نلخص ما اكتشفناه.

في React ، يمكننا ببساطة تحديد مكون باستخدام وظيفة تُرجع صيغة تشبه HTML.

تمكننا React Hooks من تحديد الحالة في مثل هذه المكونات الوظيفية.

وأخيرًا وليس آخرًا ، تخلصنا أخيرًا من thisالمعلمة الزائفة في المكونات. ربما لاحظت أن ذلك thisيصبح مزعجًا بتغيير السياق عندما لا تتوقعه. لا تقلق بشأن ذلك. لن نستخدم thisفي المكونات الوظيفية.

إذا كنت قد وصلت إلى هذا الحد ، يمكنك أيضًا إلقاء نظرة على كتبي.

تم تسمية Discover Functional JavaScript بأحد ملفاتأفضل كتب البرمجة الوظيفية من BookAuthority !

لمعرفة المزيد حول تطبيق تقنيات البرمجة الوظيفية على React ، ألق نظرة على التفاعل الوظيفي.

تعلم React الوظيفية ، بطريقة قائمة على المشروع ، باستخدام البنية الوظيفية مع React و Redux .

غرد لي ملاحظاتك.