فئة مقابل المكونات الوظيفية في React ، والخيار الثالث سري للغاية

انا افضل المضغ.

مع بداية دخولي إلى React ، فإن السؤال الذي أسمعه غالبًا هو "لماذا لا أستخدم عنصر الفصل في كل شيء؟ لماذا حتى تهتم بالمكونات الوظيفية على الإطلاق؟ "

على الرغم من ما قد تقوله بعض المتاعب في البرمجة الوظيفية ، فهي ليست بالضرورة مسألة سيئة. بعد كل شيء ، توفر لنا مكونات الفصل مرونة أكثر بكثير ، وإمكانات أكثر بكثير من مكون بسيط "غبي". بالتأكيد هناك بعض الأسباب الجيدة التي تجعلنا نشعر بالقلق مع المكونات الوظيفية (أو "بدون جنسية") للبدء بها.

حسنًا ، بعد بعض الحفر ، الجواب هو ...

شخصي.

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

مكونات وظيفية

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

ليس لديهم إمكانية الوصول إلى هذا ، لذلك لا يمكنهم الحصول على دولتهم الخاصة ، ولا يمكنهم الحصول على أساليب دورة الحياة لنفس السبب. لهؤلاء ، تحتاج ...

مكونات الطبقة

إن الخبز والزبدة في إطار React ، يمكن للمكونات الطبقية أن تفعل كل شيء: الحالة ، طرق دورة الحياة ، الطرق العادية ، والتقديم ، كلها ملفوفة داخل جسم طبقي أنيق.

أنيق! الآن ، والتي لاستخدام؟

وهم الاختيار

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

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

فماذا عن هذا العنوان الفرعي المخيف؟ لنطلب من خبير رد الفعل دان أبراموف نفسه.

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

بعد إجراء بعض الاختبارات القياسية الخاصة بي ، يبدو أن المكونات الوظيفية لديها القدرة على تشغيل أسرع بنسبة 20٪ تقريبًا في المتوسط ​​، وهو أمر لا يهز العصي.

وبعد ... هناك طريقة أخرى ...

Spoiler Alert: الحقيقي هو JavaScript

أنا مدين لهذه الملاحظة ، بصراحة تهب ، لملاحظة "المادة الوظيفية الأسرع رد فعلًا" من فيليب ليوهكس بنسبة 45٪ ، الآن. السبب في أن المكونات الوظيفية ليست أسرع بكثير من مكونات الفئة لأنها لا تزال تمدد React.Component ، وبالتالي ، لا تزال قيد التحميل في كل منطق مكون الفصل!

لذا ، من أجل تسريع هذه المكونات الغبية ، نحتاج إلى تجاوز الأمتعة غير الضرورية التي تتفاعل معها. يسلمنا المكون ، وإذا كنا بحاجة للتخلي عن React ، فإن الإجابة هي ol جيدة JS.

فقاعة.

أنا أعلم. انها بسيطة جدا ، لكنها جميلة جدا. بالإضافة إلى ذلك ، في اختباراتي المعيارية ، تفوقت على مكون فصل عادي بنسبة 51٪. 51!

دعنا نلقي نظرة على عملية نقل الشعر ومعرفة سبب ذلك.

استدعاء الوظيفة المباشرة مقابل إنشاء مثيل

في مثيلنا العادي للمكون ، قمنا بتداخل المكالمات .createElement () لإنشاء شجرة DOM الخاصة بنا ، ولكن مع استدعاءات الوظائف المباشرة يمكننا ببساطة إسقاط القيمة المرجعة لوظائفنا.

اذا، فما هي الحقيقة؟

(آسف ، ليس آسف)

في نهاية اليوم ، ما هي الوجبات السريعة؟

  1. الفصول أكثر قوة ومرونة ،
  2. عديمي الجنسية أسرع قليلاً (وتتطلب كتابة أقل!) ، مع بعض الوعود على رياح التحسين ،
  3. هناك اختراق سريع (غير مجرب إلى حد ما) لك إذا كنت بحاجة إلى الضغط على كل الأداء الذي يمكنك الحصول عليه ،
  4. في نهاية اليوم ، افعل ما هو الحد الأدنى للمكون. ربما يكون الخيار الصحيح.