تفاعل مكونات الترتيب الأعلى

اكتشف ما هي المكونات ذات الترتيب الأعلى وكيف تكون مفيدة عند برمجة تطبيق React

قد تكون على دراية بوظائف الترتيب الأعلى في JavaScript. هذه هي الدالات التي تقبل الدوال كوسائط ، و / أو دالات إرجاع.

مثالين على هذه الوظائفArray.map()أوArray.filter().

في React ، نوسع هذا المفهوم ليشمل المكونات ، وبالتالي لدينامكون الطلب الأعلى (HOC)عندما يقبل المكون مكونًا كمدخل ويعيد مكونًا كمخرج له.

بشكل عام ، تسمح لك المكونات ذات الترتيب الأعلى بإنشاء تعليمات برمجية قابلة للتكوين وقابلة لإعادة الاستخدام ، وأيضًا أكثر تغليفًا.

يمكننا استخدام HOC لإضافة طرق أو خصائص إلى حالة المكون ، أو aإعادةمتجر على سبيل المثال.

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

هناك اصطلاح لإحضار مكون طلب أعلى مسبقًا بامتدادwithالسلسلة (إنها اصطلاح ، لذا فهي ليست إلزامية) ، لذلك إذا كان لديك ملفButtonالمكون ، يجب استدعاء نظيرتها ذات الترتيب الأعلىwithButton.

دعونا ننشئ واحدة.

أبسط مثال على الإطلاق لـ HOC هو الذي يعيد المكون دون تغيير:

const withElement = Element => () => <Element />

لنجعل هذا أكثر فائدة ونضيف خاصية إلى هذا العنصر ، بالإضافة إلى جميع العناصر التي أتت بها بالفعل ، اللون:

const withColor = Element => props => <Element {...props} color="red" />

نستخدم هذا المكوّن الإضافي في مكون JSX:

const Button = () => {
  return <button>test</button>
}

const ColoredButton = withColor(Button)

ويمكننا أخيرًا عرض مكون WrappedButton في تطبيقنا JSX:

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

هذا مثال بسيط للغاية ولكن نأمل أن تتمكن من التعرف على جوهر المكوّنات ذات الترتيب الأعلى قبل تطبيق هذه المفاهيم على سيناريوهات أكثر تعقيدًا.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: