10 نصائح حول كيفية جعل رمز ReactJS الخاص بك مثل PRO

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

لماذا ا؟ هذا بسيط - إذا عد فريقك إلى 5 أشخاص ، فمن السهل أن نسأل كيف يعمل. ولكن إذا كان فريقك ضخمًا أو كان هناك العديد من التغييرات الديناميكية ، فإن كود الجودة الجيد يساعدنا والمطورين الآخرين على فهمه ، وبالطبع يمكنك أن تشعر أنك محترف ؛

لقد اتخذت 10 أفضل الممارسات ، والتي ساعدتني وفريقي على تحسين جودة الكود في مشاريع React الخاصة بنا. تعتمد هذه النصائح عمومًا على وظيفة ES6 ، لكننا لا نستخدمها دائمًا. ابحث عنهم ، ولا تتردد في استخدامه أيضًا !!

1. مكونات الطبقة VS وظيفة المكونات

كلنا سعداء للغاية ، أنه في ES6 تم تنفيذ الدعم الطبقي - أنا أحب ذلك! كرد فعل ، يمكننا أن نجعل مكونًا من خلال توسيع فئة بسيطة تسمى "React.Component". يوجد لدينا طرق بسيطة لإدارة الحالة ، ودعم أحداث الأحداث ، وما إلى ذلك في بعض الأحيان يكون الأمر أكثر من اللازم ، لكننا نعرف أنه يمكننا استخدامه.

استيراد رد فعل ، {مكون} من "رد فعل"
الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع 

مرحبًا {this.props.text}

  } }

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

استيراد رد من "رد فعل"
const MyComponent = (props) => 

مرحبًا {props.text}

لكن استخدام هذا المكونين يبدو نفسه!

حسنًا - إذن لماذا يجب علي استخدام المكونات الوظيفية؟ لأن هناك أخف بكثير ثم الطبقة الموسعة. تذكر أننا نستخدم React وإطار تفاعلي آخر لأننا نفكر في استخدام الذاكرة - فهذه الأُطُر تجعل DOM ظاهرية دون أدوات وأساليب غير ضرورية لإدارتها بطريقة أسهل وأسرع ولحجز ذاكرة أقل. لذلك إذا فكرنا في التحسين ، نحتاج إلى التفكير في هذا الاختلاف.

حسنًا - إذن متى استطعنا استخدام مكونات الفصل ومتى المكونات الوظيفية؟ القواعد سهلة للغاية - عندما تحتاج إلى استخدام شيء ما لم يكن المكون الوظيفي - مكونًا لاستخدامه!

سهل جدا؟ بلى! ابدأ في كتابة مكوناتك من الرسم مثل العنصر الوظيفي. عندما ترى أنك تحتاج إلى استخدام شيء مثل الحالات أو اكتشاف بعض التغييرات في المكون الخاص بك - مثل componentWillMount () إلخ ، ثم يمكنك تحويله إلى Class Component.

عندما تفكر في هذا النوع من استخدام المكونات ، فإنك تصبح مثل PRO!

2. "إذا" البيانات في قالب المكون

انظر أدناه ... هل تعرف ما هو الخطأ في هذه الطريقة إذا كان البيان؟

{أ> ب؟ : null}

إذا كانت الحالة غير متناسقة ، فإن React ستصبح لاغية. حسنًا ، كل شيء على مايرام - لا أرى ذلك ، فلا مشكلة ... لا !!!

لا يزال هذا فارغًا في DOM الخاص بك ، لذلك إذا كنت ترغب في أخذ جميع الأطفال من القائمة أو الاتصال بأطفال nth ، فسيتم حساب هذه القيمة الفارغة !!!

المحلول؟

{a> b && }

من السهل جدا ، أنيقة جدا. مثل المحترفين!

3. وظيفة ملزمة

أنا أحب ES6! أنا أحب وظائف السهم! ولكن إذا فهمت كيف تعمل حقًا ، فسيكون استخدامها سريعًا للغاية. المزيد عنها (هنا). في وظيفة السهم القصير جدا تحصل على نطاق من الوالد المباشر ، أن هناك كان يعلن.

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

الطبقة MyComponent يمتد المكون {
  منشئ (الدعائم) {
    السوبر (الدعائم)
    this.clickHander = this.clickHander.bind (هذا)
  }
  clickHander (e) {
    e.preventDefault ()؛
    تنبيه ("مرحبًا" + this.props.text)
  }
  يجعل() {
    قم بإرجاع  
  }
}

نعلن عن وظيفة clickHandler ، لكن السياق الرئيسي لها (هذا) هو الزر الذي نقره. لذلك إذا أردنا ربط هذا كصفنا ، إذن ، نحن بحاجة إلى ربطه في المنشئ.

هل يمكنني جعله أسهل؟ بالتاكيد!!! حسب السهم وظيفة لأنه يحصل على نطاق من الوالدين المباشرين ، أنه كان هناك تعلن (نسخة من أعلاه).

الطبقة MyComponent يمتد المكون {
  clickHander = (e) => {
    تنبيه ("مرحبًا" + this.props.text)
  }
 يجعل() {
    قم بإرجاع  
  }
}

أسهل وأسرع ويبدو وكأنه PRO!

** مهم **

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

4. أقصر الدعائم والولايات

شيء آخر يمكننا استخدامه من ES6 ، لكننا نسينا - التدمير. في العديد من مراجعات الكود يمكننا أن نرى أن الكائنات الضخمة يتم تدميرها للأجزاء الصغيرة.

...
var width = this.props.myObject.width ،
    الارتفاع = this.props.myObject.height ،
    color = this.props.myObject.color؛
...

هذا طويل جدا ، وليس حل مرن. هناك طريقة سهلة للغاية لتدمير هذا أكثر ذكاء.

...
var {width، height، colour} = this.props.myObject؛
...

سهل للغاية عندما نريد أن يكون لدينا متغير بنفس الاسم مثل مفتاح الكائن.

كيف يمكننا استخدامها في رد فعل؟

استيراد رد فعل ، {مكون} من "رد فعل"
الطبقة MyComponent يمتد المكون {
  يجعل() {
    اسمح {name، age} = this.props
    return 

اسمي {name}. عمري {العمر}.   } }

أو مع مكون وظيفة

استيراد رد من "رد فعل"
const MyComponent = ({name، age}) => 

اسمي {name}. عمري {العمر}.

مثال آخر؟ عند استخدام هيكل كبير من الدعائم أو الدول.

استيراد رد فعل ، {مكون} من "رد فعل"
الطبقة MyComponent يمتد المكون {
  الولاية = {
    الفريق: [
      {
        شخص: {
          معلومات أساسية: {
            الاسم: ميكال ،
            العمر: 27
          }
        }
      }
    ]
  }
  يجعل() {
    اسمح {name، age} = this.props.team [0] .person.basicInfo
    
    return 

اسمي {name}. عمري {العمر}.   } }

سهل؟ سهل! ويبدو وكأنه PRO ؛)

5. أنماط الانفصال

نصيحة سريعة جدا - أنماط منفصلة! :د

لكن لدينا موقفان:

  1. يمكننا استخدام أنماط خارجية من الملفات (.css و .scss)
  2. نحن نستخدم بعض المكونات التي تستخدم أنماط البناء الخاصة بها ، ولكنها تستخدم الخطوط المضمنة فقط مثل واجهة المستخدم المادية

الموقف الأول سهل للغاية ، وقد تم وضعه في حزمة webass sass ومحمّل الأنماط ، وهذا كل شيء!

لكن الموقف الثاني صعب بعض الشيء ، وأريد أن أريك بعض الحلول:

# 1. كون مع الأنماط

استيراد رد فعل ، {مكون} من "رد فعل"
أنماط const = {
  الفقرة: {
    "حجم الخط ':' 10px '،
    'لون': '# FF0000'
  }
}
الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع (
      
        

هذا هو النص الأول         

هذا هو النص الثاني            )   } }

# 2. وحدات CSS

من الجيد تحميل CSS مثل الكائن والمرجع في الكود إلى الفصل الموجود في ملف css.

استيراد رد فعل ، {مكون} من "رد فعل"
استيراد الفئات من "./style.css"
الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع (
      
        

هذا هو النص الأول         

هذا هو النص الثاني            )   } }

فيديو سريع كيفية إعدادك webpack ل CSS

وتذكر أنه - إذا كنت تستطيع فصل ملفاتك وتسهيل التحرير ، فأنت تعمل كمحترف!

6. تبعيات البيئات

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

استخدم متغيرات البيئة - متغير إضافي يمكنك تعيينه أثناء بدء المشروع أو بنائه. عندما تبدأ أي إجراء من الجهاز الطرفي ، يمكنك وضع متغيرات إضافية يتم دفعها إلى التطبيق من خلال عقدة في process.env ثم يمكنك دفع أي شيء.

السابق. MY_VARIABLE = "مرحبًا أيها العالم!" بدء تشغيل npm

ثم في process.env.MY_VARIABLE يجب أن نرى قيمتنا.

إذا كنت تستخدم تطبيق create-react-app ، فستحصل على متغير مُنشأ مثل NODE_ENV الذي يعيد وضع الإنشاء مثل التطوير أو الإنتاج أو الاختبار. وهذا كله للاستخدام الأساسي.

const isDebug = process.env.NODE_ENV === 'development'

كيفية استخدامها في الممارسة العملية؟

استيراد رد فعل ، {مكون} من "رد فعل"
const isDebug = process.env.NODE_ENV === 'development'
الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع (
      
        

هذا هو نصي العام         {isDebug &&

هذا هو نص التطوير الخاص بي }            )   } }

لست متأكدًا من أنها مثل المحترف ولكن يمكنك المرور عبر ENV VARIABLE على بعض المعلومات الحساسة للبيئة مثل عنوان URL الخاص بجذر واجهة برمجة التطبيقات أو عنوان المشروع وما إلى ذلك.

** مهم **

لا تنسَ أنه إذا أراد أي شخص فك شفرة شفرة المصدر ، فيمكنه حينئذٍ أن يرى لك تبعيات.

7. تذكر حول إمكانيات اختبار المكون

هذا أمر سهل الفهم - إذا كنت تفكر في اختبار تفاعلك مع التطبيق ، فربما تريد استخدام Jest للاختبار. لكن عليك أن تتذكر أنه إذا قمت بتوصيل مكوناتك ببعض الخلفية مثل Apollo (لـ GraphQL) أو جهاز الحالة مثل Redux أو HOC آخر ، فعليك أن تتذكر أن هذه الملحقات لن تكون متاحة في اختبار المكونات البسيط. وهذا طبيعي. عندما ترغب في اختبار مكون SINGLE الخاص بك ، فأنت تقوم باختبار وظيفة فقط هناك - التحقق مما إذا كانت الدعائم والإجراءات المدخلة على المكون تعمل بشكل صحيح.

فكيف تحضير مكوناتك للاختبار؟

إذا لم يكن لديك أي HOC ، فقم بالتصدير بشكل طبيعي:

استيراد رد فعل ، {مكون} من "رد فعل"
الطبقة MyComponent يمتد المكون {
  يجعل() {
    اسمح {name، age} = this.props
    return 

اسمي {name}. عمري {العمر}.   } }

تصدير الافتراضي MyComponent

ولكن إذا كنت تريد استخدام أي HOC ، استخدم هذا النمط:

استيراد رد فعل ، {مكون} من "رد فعل"
فئة التصدير MyComponent يمتد المكون {
  يجعل() {
    اسمح {name، age} = this.props
    return 

اسمي {name}. عمري {العمر}.   } }

myHocFunction الافتراضي للتصدير (MyComponent)

لماذا ا؟ لأنه عندما تريد الاستيراد في مستند آخر ، فأنت تستخدم مكون HOC ثم تستخدمه:

استيراد MyComponent من './components/MyComponent'

ولكن في الاختبارات التي يمكنك استخدامها

استيراد {MyComponent} من './components/MyComponent'

رمز بسيط ، حل بسيط ولكن هناك العديد من إمكانات الاستخدام - نظرًا لأننا محترفين ؛)

8. استخدام المساعدين

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

عامة
SRC
  المساعدين
    globals.js
  وحدات
    المستخدمين
      المساعدين
        index.js
      UserList.js
      User.js
  app.js

** مهم **
إذا كنت تكرر رمزك - يجب عليك تحسينه!

فصل الملفات هو أفضل طريقة لتصبح مثل PRO!

9. رد فعل شظايا

لقد قمت بإعداد أفضل تنسيق لديك ، HTML markup هو الأفضل ، كل فكرة تبدو جميلة ... ARHHHH AMAZING ، فقط تفاعل مع التنفيذ ... رأس ... تبدو مثالية ... jumbotron ... رائع ... انتظر ... لدي قسم واحد غير مغلف ... OH NO ... رد فعل ... القرف!

كانت هذه مشكلة عندما تريد تكوين مكون لا يحتوي على غلاف. لفترة طويلة نحتاج إلى التفاف كل شيء:

الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع (
      
        

هذا هو النص الأول         

هذا هو النص الثاني            )   } }

لأن الرد لم يسمح لنا بوضعه بمفرده. لماذا - لم يتم استخدامه إذا كان لكل عنصر داخل مفتاح uniq الخاص به ، يمكنه التعرف على أي جزء من DOM هو مكونه.

لكن React أضافت ميزة جديدة تسمى "شظايا React" ، والتي تسمح لك بإنشاء مكون يجمع العديد من العناصر دون التفاف في DOM. إنه يعمل بنفس الطريقة مثل التفاف div ولكن بدلاً من ذلك ، نستخدم عبارة "React.Fragment> أو نسخة قصيرة <>

السابق.

الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع (
      
        

هذا هو النص الأول         

هذا هو النص الثاني            )   } }

أو

الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع (
      <>
        

هذا هو النص الأول         

هذا هو النص الثاني            )   } }

مذهلة - أنت مثل PRO قراءة المادة كاملة من الوثائق

10. يستخدم المحترفون أنواع الدعامة والدعائم الافتراضية

إذا كنت محترفًا ، فأنت تفكر في الأشياء التي تحتاجها. لماذا يجب علي استخدام PropTypes؟

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

استيراد رد فعل ، {مكون} من "رد فعل"
استيراد PropTypes من "prop-types"
الطبقة MyComponent يمتد المكون {
  يجعل() {
    إرجاع 

مرحبًا {this.props.text.toLocaleUpperCase ()}

  } }
MyComponent.propTypes = {
  النص: PropTypes.string
}
MyComponent.defaultProps = {
  النص: "العالم"
}

وتريد أن تعرف المزيد عن PropTypes - الوثائق الكاملة

ملخص

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