وظائف ذات رتبة أعلى: ما هي ، ومثال على React

سلسلة المصطلحات الفنية

هناك الكثير من العبارات التي يتم طرحها في اللقاءات والمؤتمرات التقنية ، على افتراض أن كل شخص يعاني بالفعل من مشكلة في اللغة. غالبًا ما لا أتعامل مع اللغة. من الشائع أن يتصرف المطورون مندهشين لأنني أفتقر إلى جزء من المعرفة.

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

موضوعي الأول في هذه السلسلة هو الدالات ذات الترتيب الأعلى. كنت في اجتماع تقني في ذلك اليوم ، وكنا نناقش React ومدى صعوبة دخول React المبتدئين إلى الشفرة. لقد ذكرت أن المكونات عالية الترتيب (HOCs) قد يكون من الصعب فهمها. كان الرد أنها تشبه إلى حد كبير وظائف الرتب العليا ، ألا أوافق؟ وقلت: "لا أعرف ما هذا." عندما سألت عن مثال ، قيل لي "خريطة". لقد أدليت بمزحة حول كيف أنه ليس لدي أي فكرة عن ماهية "الخريطة" وانتقلنا.

لكن لا يزال: ما هي وظيفة الترتيب الأعلى؟

(ملاحظة: جميع الأمثلة الواردة في Javascript ، ولكن هذا المفهوم ينطبق على كل لغة برمجة.)

وظائف الرتبة الأعلى: تعريف

دالة الترتيب الأعلى هي التي إما أن أ) تأخذ دالة كوسيطة أو ب) ترجع دالة.

إذا كانت الوظيفة لا تقوم بأي من هذين الأمرين ، فهي وظيفة من الدرجة الأولى .

خريطة

دعونا تبدأ مع المثال أنا أعطيت: map.

[1, 2, 3].map(num => num * 2)> [2, 4, 6]

و mapيسمى الدالة على مجموعة ويأخذ وظيفة "رد". يقوم بتطبيق الوظيفة على كل عنصر من عناصر المصفوفة ، ويعيد مصفوفة جديدة. [1, 2, 3]هي صفيفتنا و num => num * 2 هي وظيفتنا. رد النداء هو وسيطة الوظيفة التي تم تمريرها إلى دالة الترتيب الأعلى.

هذا HOF مخبوز في اللغة ، نموذج أولي على Array ( Array.prototype.map).

ومن الأمثلة الأخرى على HOFs نموذج أولي على صفيف هي filter، reduceو some.

مثال مخصص

فلنكتب دالة الترتيب الأعلى الخاصة بنا.

وظيفة مرت

const myFunc = age => age * 2

وظيفة ذات ترتيب أعلى

نكتب الآن دالة تأخذ دالة.

const hof = (customFunc, age) => customFunc(age + 5) 

سنقوم بتمرير رقم إلى hof، والذي سيضيف 5 ثم نستدعي الدالة التي تم تمريرها ، والتي ستضاعف الرقم. إذا مررنا بـ 10 ، فسنمرر 15 إلى الدالة الأولى ، والتي تضاعف بعد ذلك إلى 30.

مثال مخصص باستخدام "مكونات" React

كما أشرت أعلاه ، ظهر هذا الموضوع في إشارة إلى مكونات React. نظرًا لأن مكون React هو وظيفة ، فعند تمريره إلى دالة أخرى ، فإننا ننشئ وظيفة ذات ترتيب أعلى ، والتي تسميها React "مكونات ذات ترتيب أعلى". إذا كنت تستخدم مكونات ذات حالة (وتوسع في React Component) ، فأنت تستخدم بالفعل المكوّنات ذات الترتيب الأعلى.

مكون عديم الجنسية

const details = ({ name, randomNum }) => `${name}, ${randomNum}`

لدينا وظيفة ، تسمى details، نمرر إليها props. نحن نقوم بتفكيكها فور دخولها وتخصيصها للمتغيرات المحلية nameو randomNum. هذا هو بناء جملة ES6 - إذا بدا غير مألوف ، أعطه google (ستحبه).

هذه دالة من الدرجة الأولى - تأخذ وسيطة واحدة ( propsكائن) وتعيد قالبًا حرفيًا.

مكون عالي الرتبة

const hoc = (component, props) => { const randomNum = Math.floor(Math.random() * 100) return component({ ...props, randomNum }) }

هذه دالة ذات ترتيب أعلى - فهي تأخذ وظيفة ( componentالتي تستدعيها بعد ذلك ، وتمرير الدعائم الإضافية). هذا مثال أساسي للغاية لما يفعله كل مكون من مكونات React عديمة الحالة.

يمكنك استخدام هذا النمط لتجريد التعليمات البرمجية المشتركة بين العديد من المكونات في التطبيق الخاص بك.

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

المراجع

  • وظيفة ذات ترتيب أعلى ، ويكيبيديا
  • وظائف ذات رتبة أعلى ، Eloquent Javascript (الفصل 5)
  • Array.prototype مستندات MDN.