React היא אחת מהמסגרות החזיתיות הפופולריות ביותר עבור JavaScript. בניגוד למסגרות אחרות כמו Angular, זה מאוד חסר דעה. לכן, זה תלוי בך להחליט איך אתה רוצה לכתוב או לבנות את קוד ה-React שלך.

מאמר זה בוחן כמה שיטות עבודה שעליך לבצע כדי לשפר את הביצועים של אפליקציית React שלך.

1. שימוש ברכיבים פונקציונליים ובווים במקום מחלקות

ב-React, אתה יכול השתמש ברכיבים כיתה או פונקציונליים עם ווים. עם זאת, עליך להשתמש ברכיבים פונקציונליים וב-hooks לעתים קרובות יותר מכיוון שהם מביאים לקוד תמציתי וקריא יותר בהשוואה למחלקות.

שקול את רכיב הכיתה הבא המציג נתונים מ-NASA API.

class NasaData מרחיב את React. רכיב {
 בנאי (אביזרים) {
 סופר (אביזרים);
 this.state = {
 נתונים: [],
 };
 }
 componentDidMount() {
 לְהָבִיא(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 נתונים: json,
 });
 });
 }
 render() {
 const { נתונים } = this.state;
 if (!data.length)
 לחזור (


 אוסף מידע... 
{" "}



 );
 לחזור (
 <>
 אחזר נתונים באמצעות רכיב Class 
{" "}
 {data.map((item) => (
{כותרת פריט}

 ))}
 );
 }
}

ניתן לכתוב את אותו רכיב באמצעות ווים.

const NasaData = () => {
 const [נתונים, setdata] = useState (null);
 useEffect(() => {
 לְהָבִיא(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [נתונים]);
 לחזור (
 <>
 אחזר נתונים באמצעות רכיב Class 
{" "}
 {data.map((item) => (
{כותרת פריט}

 ))}
 );
};

למרות שבלוק הקוד שלמעלה עושה את אותו הדבר כמו רכיב הכיתה, הוא פחות מורכב, מינימלי וקל להבנה מה שתורם לחוויית מפתח טובה יותר.

2. הימנע משימוש במצב (אם אפשר)

מצב React עוקב אחר הנתונים שכאשר הם משתנים גורם לרכיב React לעיבוד מחדש. בעת בניית אפליקציות React, הימנע ככל האפשר משימוש ב-State מכיוון שככל שתשתמש יותר ב-State, כך יש לך יותר נתונים לעקוב אחר האפליקציה שלך.

אחת הדרכים למזער את השימוש במדינה היא על ידי הכרזה עליה רק ​​כשצריך. לדוגמה, אם אתה מביא נתוני משתמש מ-API, אחסן את כל אובייקט המשתמש במצב במקום לאחסן את המאפיינים הבודדים.

במקום לעשות את זה:

const [שם משתמש, שם משתמש] = useState('')
const [סיסמה, setpassword] = useState('')

תעשה את זה:

const [משתמש, setuser] = useState({})

כאשר מחליטים על מבנה פרויקט, לך על אחד ממוקד רכיבים. המשמעות היא שכל הקבצים הנוגעים לרכיב אחד בתיקייה אחת.

אם היית יוצר א Navbar רכיב, צור תיקיה בשם navbar המכיל את Navbar הרכיב עצמו, גיליון הסגנונות וקבצי JavaSript ונכסים אחרים המשמשים ברכיב.

תיקיה אחת המכילה את כל הקבצים של רכיב מקלה על שימוש חוזר, שיתוף וניפוי באגים. אם אתה צריך לראות איך רכיב עובד אתה צריך רק לפתוח תיקיה אחת בודדת.

4. הימנע משימוש באינדקסים כאביזרי מפתח

React משתמשת במפתחות לזיהוי ייחודי של פריטים במערך. בעזרת מקשים, React יכול לאתר איזה פריט שונה, הוסיף או הוסר מהמערך.

רוב הזמן בעת ​​רינדור מערכים, ייתכן שתשתמש באינדקס כמפתח.

const Items = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 לחזור (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
};

למרות שלפעמים זה עובד, השימוש באינדקס כמפתח יכול להציג בעיות במיוחד אם הרשימה צפויה להשתנות. שקול את הרשימה הזו.

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

נכון לעכשיו, פריט הרשימה הראשון, "פריט 1" נמצא באינדקס אפס, אבל אם הוספת פריט נוסף בתחילת הרשימה, "פריט 1” אינדקס ישתנה ל-1 מה שמשנה את התנהגות המערך שלך.

הפתרון הוא להשתמש בערך ייחודי כאינדקס כדי להבטיח שהזהות של פריט הרשימה נשמרת.

5. בחר ב-Fragments במקום Divs איפה שאפשר

רכיבי React צריכים להחזיר קוד עטוף בתג בודד בדרך כלל א או קטע React. כדאי לבחור בקטעים במידת האפשר.

באמצעות מגדיל את גודל ה-DOM, במיוחד בפרויקטים ענקיים, מכיוון שככל שיש לך יותר תגים או צמתי DOM, כך האתר שלך צריך יותר זיכרון והדפדפן משתמש בכוח רב יותר כדי לטעון את האתר שלך. זה מוביל למהירות דף נמוכה יותר ולחווית משתמש ירודה.

דוגמה אחת לביטול מיותר תגיות לא משתמשות בהן בעת ​​החזרת אלמנט בודד.

כפתור const = () => {
 לַחֲזוֹר לְהַצִיג;
};

6. פעל לפי מוסכמות השמות

עליך להשתמש תמיד ב-PascalCase בעת מתן שמות לרכיבים כדי להבדיל אותם מקבצי JSX אחרים שאינם רכיבים. לדוגמה: שדה טקסט, NavMenu, ו כפתור הצלחה.

השתמש ב-camelCase עבור פונקציות המוצהרות בתוך רכיבי React כמו handleInput() אוֹ showElement().

7. הימנע מקוד חוזר

אם אתה מבחין שאתה כותב קוד משוכפל, המר אותו לרכיבים שניתן לעשות בהם שימוש חוזר.

לדוגמה, הגיוני יותר ליצור רכיב עבור תפריט הניווט שלך במקום לכתוב שוב ושוב את הקוד בכל רכיב שדורש תפריט.

זה היתרון של ארכיטקטורה מבוססת רכיבים. אתה יכול לפרק את הפרויקט שלך לרכיבים קטנים שתוכל לעשות בהם שימוש חוזר בכל היישום שלך.

8. השתמש ב-Object Destructuring עבור אביזרים

במקום להעביר את אובייקט האביזרים, השתמש בהרס אובייקט כדי להעביר את שם האביזר. זה מבטל את הצורך להתייחס לאובייקט האביזרים בכל פעם שאתה צריך להשתמש בו.

לדוגמה, להלן רכיב המשתמש באביזרים כפי שהוא.

const Button = (אביזרים) => {
 לַחֲזוֹר {props.text};
};

עם הרס אובייקט, אתה מתייחס ישירות לטקסט.

Const Button = ({text}) => {
 לַחֲזוֹר {טֶקסט};
};

9. עיבוד דינמי של מערכים באמצעות מפה

להשתמש מַפָּה() לעיבוד דינמי של בלוקי HTML חוזרים. לדוגמה, אתה יכול להשתמש מַפָּה() כדי להציג רשימה של פריטים ב תגים.

const Items = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 לחזור (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
 };

למטרות השוואה, הנה איך אתה יכול לעבד את הרשימה בלי מַפָּה(). גישה זו חוזרת על עצמה מאוד.

const List = () => {
 לחזור (


פריט 1

פריט 2

פריט 3

פריט 4

פריט 5




 );
};

10. כתוב בדיקות עבור כל רכיב React

כתוב בדיקות עבור הרכיבים שאתה יוצר מכיוון שזה מפחית את האפשרויות לשגיאות. בדיקה מבטיחה שהרכיבים מתנהגים כפי שהיית מצפה. אחת ממסגרות הבדיקה הנפוצות ביותר עבור React היא Jest, והיא מספקת סביבה שבה אתה יכול לבצע את הבדיקות שלך.

למרות ש-React גמישה במידה מסוימת מבחינת האופן שבו אתה יכול להשתמש בו, ביצוע שיטות ספציפיות יעזור לך להפיק את המרב מהחוויה שלך.

כשאתה עוקב אחר הטיפים האלה, זכור את הפרויקט והיעדים הספציפיים שלך; חלקם יהיו רלוונטיים יותר במקרים מסוימים מאחרים.

כיצד לצרוך ממשקי API ב-React באמצעות Fetch ו-Axios

רוצה לדעת איך להשתמש בממשקי API? ההבנה כיצד לצרוך ממשקי API ב-React היא מרכיב מפתח בשימוש ב-API.

קרא הבא

על הסופר