أفضل المُمارسات التي تحتاج إلى اتباعها على React في هذا العام

يُعد React أحد أكثر أطر عمل الواجهة الأمامية شيوعًا للغة جافا سكريبت. على عكس الأطر الأخرى مثل Angular ، فهو غير منهجي بشكل كبير. لذلك ، الأمر متروك لك لتُقرر كيف تُريد كتابة أو هيكلة كود React الخاص بك.

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

أفضل المُمارسات التي تحتاج إلى اتباعها على React في هذا العام - شروحات

1. استخدام المُكوِّنات الوظيفية والخطافات بدلاً من الأصناف

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

إليك مُقتطف من مُكوِّن الفئة الذي يعرض البيانات من NASA API.

class NasaData extends React.Component {
 constructor(props) {
 super(props);

this.state = {
 data: [],
 };
 }

componentDidMount() {
 fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 data: json,
 });
 });
 }

render() {
 const { data } = this.state;

if (!data.length)
 return (
 <div>
 <h1> Fetching data…. </h1>{“ “}
 </div>
 );

return (
 <>
 <h1> Fetch data using Class component </h1>{“ “}
 {data.map((item) => (
 <div key={item.id}>{item.title}</div>
 ))}
 </>
 );
 }
}

يُمكنك كتابة نفس المُكوِّن باستخدام الخطافات:

const NasaData = () => {
 const [data, setdata] = useState(null);

useEffect(() => {
 fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata(json);
 });
 }, [data]);

return (
 <>
 <h1> Fetch data using Class component </h1>{“ “}
 {data.map((item) => (
 <div key={item.id}>{item.title}</div>
 ))}
 </>
 );
};

على الرغم من أن التعليمات البرمجية أعلاه تقوم بنفس الشيء مثل مُكوِّن الفئة ، إلا أنها أقل تعقيدًا ، وأقل حدًا ، وسهلة الفهم.

2. تجنب استخدام الحالة (إن أمكن)

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

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

بدلاً من التالي:

const [username, setusername] = useState(‘’)
const [password, setpassword] = useState(‘’)

يُمكنك القيام بما يلي:

const [user, setuser] = useState({})

3. تنظيم الملفات المُتعلقة بنفس المُكوِّن في مجلد واحد

عند اتخاذ قرار بشأن بنية مجلد لتطبيق React الخاص بك ، عليك التفكير في استخدام بنية تُركز على المُكوِّن. هذا يعني تخزين جميع الملفات المتعلقة بمُكوِّن واحد في مجلد واحد.

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

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

أفضل مُمارسات مجلد React الأخرى هي:

  1. استخدم ملفات الفهرس لتلخيص تفاصيل التنفيذ لملف المُكوِّن الخاص بك. بالنظر إلى مثال Navbar ، قم بإنشاء مجلد Navbar وفي هذا المجلد قم بإضافة ملف مكون يسمى index.js (أو .ts).
  2. احتفظ بالمكونات القابلة لإعادة الاستخدام في مجلد منفصل. إذا كانت لديك مُكوِّنات يستخدمها أكثر من جزء من التطبيق الخاص بك ، ففكر في الاحتفاظ بها في مجلد باسم Components. سيساعدك هذا في تحديد مكانها بسهولة.
  3. احتفظ بوظائف الأداة المُساعدة في مجلد منفصل مثل مجلد lib أو مجلد Assistants. سيؤدي ذلك إلى تسهيل إدارة هذه الوظائف وإعادة استخدامها لاحقًا.

4. تجنب استخدام الفهارس كدعامات رئيسية

يستخدم React مفاتيح لتعريف العناصر في المصفوفة بشكل فريد. باستخدام المفاتيح ، يُمكن لـ React تحديد العنصر الذي تم تغييره أو إضافته أو إزالته من المصفوفة.

عند تقديم المصفوفات ، يُمكنك استخدام الفهرس كمفتاح.

const Items = () => {
 const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];

return (
 <>
 {arr.map((elem, index) => {
 <li key={index}>{elem}</li>;
 })}
 </>
 );
};

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

const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];

حاليًا ، عنصر القائمة الأول ، “Item1” موجود في الفهرس صفر ، ولكن إذا أضفت عنصرًا آخر في بداية القائمة ، فسيتغير فهرس “Item1” إلى 1 والذي يُغيِّر سلوك المصفوفة الخاصة بك.

الحل هو استخدام قيمة فريدة كفهرس لضمان الحفاظ على هوية عنصر القائمة.

5. اختيار الأجزاء بدلاً من Divs حيثما أمكن ذلك

تحتاج مُكوِّنات React إلى إرجاع شفرة مُضمَّنة في علامة واحدة عادةً ما تكون <div> أو جزء React. يجب عليك اختيار الأجزاء حيثما أمكن ذلك.

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

أحد الأمثلة على التخلص من علامات <div> غير الضرورية هو عدم استخدامها عند إرجاع عنصر واحد.

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

6. اتباع اصطلاحات التسمية

يجب عليك دائمًا استخدام PascalCase (إزالة المسافات وتكبير الحرف الأول من كل كلمة) عند تسمية المُكوِّنات لتمييزها عن ملفات JSX الأخرى غير المُكونة. على سبيل المثال: TextField و NavMenu و SuccessButton.

استخدم CamelCase (كتابة العبارات دون مسافات أو علامات ترقيم ، ويُفصل بين الكلمات بحرف كبير وحيد) للوظائف المعلنة داخل مُكوِّنات React مثل handleInput() أو showElement().

7. تجنب التعليمات البرمجية المُتكررة

إذا لاحظت أنك تكتب كودًا مُكررًا ، فحوله إلى مُكوِّنات يمكن إعادة استخدامها.

على سبيل المثال ، من المنطقي إنشاء مُكوِّن لقائمة التنقل الخاصة بك بدلاً من تكرار كتابة التعليمات البرمجية في كل مُكون يتطلب قائمة.

هذه هي ميزة المعمارية القائمة على المُكوِّنات. يُمكنك تقسيم مشروعك إلى مُكوِّنات صغيرة يُمكنك إعادة استخدامها عبر تطبيقك. تحقق من كيفية إنشاء مُشغِل فيديو في React.

8. استخدم خاصية الإسناد بالتفكيك للحصول على الدعائم

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

على سبيل المثال ، ما يلي هو مُكوِّن يستخدم الخاصيات كما هي.

const Button = (props) => {
 return <button>{props.text}</button>;
};

مع الإسناد بالتفكيك للكائن ، يُمكنك الرجوع إلى النص مُباشرةً.

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

9. عرض المصفوفات ديناميكيًا باستخدام الخريطة

استخدم map() لعرض كتل HTML المُتكررة ديناميكيًا. على سبيل المثال ، يُمكنك استخدام map() لعرض قائمة بالعناصر في علامات <li>.

const Items = () => {
 const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];

return (
 <>
 {arr.map((elem, index) => {
 <li key={elem+index}>{elem}</li>;
 })}
 </>
 );
};

لأغراض المُقارنة ، إليك كيفية عرض القائمة بدون map(). هذا النهج مُتكرر للغاية.

const List = () => {
 return (
 <ul>
 <li>Item1</li>
 <li>Item2</li>
 <li>Item3</li>
 <li>Item4</li>
 <li>Item5</li>
 </ul>
 );
};

10. اكتب الاختبارات لكل مُكون من مُكوِّنات التفاعل

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

React هو إطار عمل قوي ، ولكن يجب عليك اتباع مُمارسات مُعينة

على الرغم من أنَّ React مرن للغاية في كيفية استخدامها ، إلا أنَّ اتباع مُمارسات مُحددة سيُساعدك على تحقيق أقصى استفادة من تجربتك.

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

المصدر
زر الذهاب إلى الأعلى