كيف تكون أفضل في إعادة استخدام كود React - الجزء الثاني

إطار تطوير التطبيق ، رد فعل

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

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

كيف يمكننا تحقيق قابلية إعادة الاستخدام في التفاعل؟

الخطوة 1: تحديد المكون القابل لإعادة الاستخدام

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

الخطوة 2: تحديد واجهة برمجة التطبيقات الخاصة بالمكون

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

الخطوة 3: اكتب كود المكون

الخطوة الثالثة في إنشاء مكوِّن قابل لإعادة الاستخدام في React هي كتابة كود المكوِّن. يجب أن يكون الرمز نظيفًا وسهل القراءة ومنظمًا جيدًا. يجب تصميم المكون بحيث يكون مرنًا وقابل للتخصيص ، مع فصل واضح للمخاوف.

الخطوة 4: اختبر المكون

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

الخطوة 5: انشر المكون

الخطوة الأخيرة في إنشاء مكوِّن قابل لإعادة الاستخدام في React هي نشر المكوِّن. يمكن نشر المكون كحزمة على مدير الحزم مثل npm ، أو يمكن مشاركته كمكتبة مكونة داخل المنظمة.

فيما يلي مثال لمكوِّن قابل لإعادة الاستخدام في React يعرض قائمة بالعناصر:

import React from "react";

function ItemList(props) {
  const { items, renderItem } = props;

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

export default ItemList;

في هذا المثال ، ItemList مكونًا قابلًا لإعادة الاستخدام يعرض قائمة بالعناصر. يتطلب الأمر خاصيتين: العناصر ، وهي مصفوفة من العناصر المراد عرضها ، و renderItem ، وهي دالة تأخذ عنصرًا كوسيطة وتعيد JSX ليتم عرضها لهذا العنصر.

واجهة ItemList محددة جيدًا: فهي تتطلب مجموعة من العناصر ووظيفة لعرض كل عنصر. هذا يجعل المكون مرنًا وقابلًا للتخصيص ويسمح باستخدامه في سياقات مختلفة.

رمز ItemList نظيف وسهل القراءة ومنظم جيدًا. تم تصميم المكون ليكون مرنًا وقابل للتخصيص ، مع فصل واضح للمخاوف.

يجب اختبار مكون ItemList بدقة للتأكد من أنه يعمل كما هو متوقع ويمكنه التعامل مع حالات الاستخدام المختلفة . بمجرد اختبار المكون وجاهزيته للاستخدام ، يمكن نشره كحزمة أو مشاركته كمكتبة مكونة داخل المنظمة.

أربعة تحديات رئيسية تواجه مطوري التفاعل

عند مشاركة المكونات عبر مشاريع متعددة في React ، يمكن أن تنشأ تعارضات وتضارب في التسمية. يمكن معالجة هذه المشكلات باتباع أفضل الممارسات التالية:

استخدم مساحات الأسماء الفريدة

يمكن أن يساعد استخدام مساحات الأسماء الفريدة في تجنب تضارب التسمية. مساحة الاسم هي بادئة يتم إضافتها إلى اسم المكون لجعله فريدًا. على سبيل المثال ، إذا كان هناك مشروعان يستخدمان مكونًا يسمى Button ، فيمكن لمشروع واحد إضافة مساحة اسم ProjectA إلى المكون ، ويمكن للمشروع الآخر إضافة مساحة اسم ProjectB إلى المكون.

// In Project A
import { Button as ProjectAButton } from "component-library";

// In Project B
import { Button as ProjectBButton } from "component-library";

في هذا المثال ، Button من مكتبة المكونات باسم مختلف في كل مشروع ، باستخدام مساحة اسم لمكون الفئة لجعله فريدًا.

استخدم الحزم المحددة النطاق

يمكن أن يساعد استخدام الحزم المحددة النطاق في تجنب التعارض بين الحزم. الحزمة المحددة النطاق هي حزمة تحمل اسمًا يتضمن نطاقًا ، مثل @ my-org / my-package . الحزم المحددة مضمونة لتكون فريدة ، مما يجعل من السهل تجنب تصادم التسمية.

npm install @my-org/component-library

في هذا المثال ، مكتبة المكوّنات عبارة عن حزمة محددة النطاق مع النطاق @ my-org . هذا يجعل من السهل تجنب تعارض التسمية بين الحزم.

استخدم الإصدار

يمكن أن يساعد استخدام الإصدار في تجنب التعارض بين الإصدارات المختلفة للحزمة. عندما يتم تحديث الحزمة ، يزداد رقم الإصدار. من خلال تحديد رقم إصدار عند تثبيت حزمة ، يمكنك التأكد من أنك تستخدم إصدارًا محددًا من الحزمة.

npm install component-library@1.0.0

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

تبعيات الوثيقة

يمكن أن يساعد توثيق تبعيات الحزمة في تجنب التعارض بين الحزم. من خلال توثيق تبعيات الحزمة ، يمكنك التأكد من استخدام الإصدارات الصحيحة من الحزم معًا.

{
  "dependencies": {
    "react": "^16.8.6",
    "component-library": "^1.0.0"
  }
}

في هذا المثال ، مكتبة المكوّنات كعنصر تبعية في package.json . يتم تحديد رقم الإصدار بحرف الإقحام ( ^ ) ، مما يعني أنه يمكن تحديث الحزمة إلى إصدار ثانوي أو إصدار تصحيح أحدث ، ولكن ليس إلى إصدار رئيسي أحدث. من خلال تحديد الإصدار الصحيح من الحزمة ، يمكنك التأكد من استخدامه مع الإصدار الصحيح من الحزم الأخرى وتجنب التعارضات.

إدارة تبعيات المكونات القابلة لإعادة الاستخدام

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

استخدم مديري الحزم

استخدم مدير الحزم مثل npm أو Yarn لإدارة التبعيات. يسهّل مديرو الحزم تثبيت التبعيات وتحديثها ، ويضمنون استخدام الإصدارات الصحيحة من التبعيات.

npm install my-component-library

في هذا المثال ، my-component-library باستخدام مدير الحزم npm.

حدد التبعيات

حدد تبعيات المكون في وثائق المكون أو في package.json . هذا يوضح ما هي التبعيات التي يعتمد عليها المكون.

{
  "name": "my-component-library",
  "version": "1.0.0",
  "dependencies": {
    "react": "^16.8.0",
    "lodash": "^4.17.20"
  }
}

في هذا المثال ، تحدد حزمة my-component-library رد فعل ولوداش على أنها تبعيات في package.json .

استخدم تبعيات الأقران

استخدم تبعيات الأقران لتحديد التبعيات التي يتوقع أن يقدمها مستهلك المكون. تبعيات الأقران هي تبعيات لم يتم تثبيتها مع المكون ، ولكن من المتوقع أن يقوم المستهلك بتثبيتها.

{
  "name": "my-component-library",
  "version": "1.0.0",
  "peerDependencies": {
    "react": "^16.8.0",
    "lodash": "^4.17.20"
  }
}

هذا المثال ، تحدد حزمة my-component-library رد فعل ولوداش على أنها تبعيات نظير في package.json . هذا يعني أنه من المتوقع أن يقوم مستهلك المكون بتثبيت هذه الحزم بشكل منفصل.

حافظ على التبعيات محدثة

حافظ على التبعيات محدثة عن طريق تحديثها بانتظام إلى أحدث إصدار. يمكن أن يساعد ذلك في ضمان توافق المكون مع أحدث إصدارات تبعياته.

npm update my-component-library

في هذا المثال ، my-component-library إلى أحدث إصدار باستخدام مدير الحزم npm.

اختبار مع إصدارات مختلفة من التبعيات

اختبر المكون بإصدارات مختلفة من تبعياته للتأكد من أنه متوافق. استخدم أداة مثل npx create-react-app لإنشاء مشروع React جديد بالإصدارات المرغوبة من التبعيات. ثم قم باستيراد المكون واختبره في المشروع الجديد.

import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "my-component-library";

ReactDOM.render(<MyComponent />, document.getElementById("root"));

في هذا المثال ، MyComponent من my-component-library واستخدامه في مشروع React جديد مع الإصدارات المطلوبة من التبعيات. يمكن أن يساعد ذلك في ضمان توافق المكون مع الإصدارات المرغوبة من التبعيات.

خاتمة

لتلخيصها في نقاط واضحة ، إليك الخطوات الأساسية التي يجب اتباعها:

  • حافظ على المكونات صغيرة ومخصصة للوظيفة

من المهم الحفاظ على المكونات صغيرة وإلى حد مهمة محددة. هذا يجعل من السهل إعادة استخدام المكون في سياقات مختلفة ويقلل من احتمالية التعارض مع المكونات الأخرى.

  • استخدام المكونات ذات الترتيب الأعلى (HOC)

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

  • استخدم دعائم التقديم

Render Props هي نمط يتلقى فيه المكون وظيفة كخاصية ، والتي يستدعيها بعد ذلك لتقديم المحتوى. يمكن أن يساعد ذلك في تحسين إمكانية إعادة استخدام الكود من خلال السماح للمكونات بأن تكون أكثر مرونة وقابلية للتخصيص.

  • استخدم السياق

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

  • استخدم خطافات React

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

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

https://ahmedradwan.dev

تواصل معنا إذا كنت ترغب في الانضمام إلي وكتابة مقالات مع المهووسين 🙂


© 2024 · الطالب الذي يذاكر كثيرا المستوى التقنية

فئات

وسائل التواصل الاجتماعي

ابق على اتصال على وسائل التواصل الاجتماعي