15 הגיב לשיטות העבודה המומלצות שאתה צריך לבצע בשנת 2020

הגיב על שיטות עבודה מומלצות


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

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

היום, אנו ממשיכים את נושא הנושא ומראים לך הבסיסי ביותר של שיטות העבודה המומלצות של React:

�� 1. שמור על רכיבים קטנים וספציפיים לתפקודים

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

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

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

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

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

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

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

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

כיתת IconButton מרחיבה את React.Component {
[…]
render () {
להחזיר (

);
}
}

�� 3. איחוד קוד כפול – לייבש את הקוד שלך

כלל נפוץ לכל הקוד הוא לשמור עליו כמה שיותר קצר ותמציתי.

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

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

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

const buttons = [‘facebook’, ‘twitter’, ‘youtube’];

להחזיר (

{
Buttons.map ((כפתור) => {
להחזיר (

);
})
}

);

�� 4. שים את CSS ב- JavaScript

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

ישנן ספריות רבות המאפשרות לך לכתוב CSS ב- JS. רגש ו זוהר הן שתי ה- CSS הפופולריות ביותר בספריות JS.

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

התקנת npm – שמור @ רגש / ליבה

בשלב הבא עליכם לייבא את EmotionJS ביישום שלכם.

ייבא {jsx} מ- ‘@ רגש / גרעין’

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

תן לרכיב = ​​אבזרים => {
להחזיר (

)
}

להלן הקישור לסיום המלא תיעוד של EmotionJS.

�� 5. הגב רק במידת הצורך

צרף הערות לקוד רק במידת הצורך. זה לא רק בהתאם לשיטות העבודה המומלצות של React, אלא גם משרת שתי מטרות בו זמנית:

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

�� 6. שם את הרכיב לאחר הפונקציה

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

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

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

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

�� 7. השתמש בכותרות עבור שמות רכיבים

אם, כמו רוב האנשים, אתה משתמש ב- JSX (סיומת JavaScript), שמות הרכיבים שאתה יוצר צריכים להתחיל באותיות גדולות. לדוגמה, תתן שם לרכיבים כ- SelectButton במקום selectbutton, או תפריט במקום תפריט. אנו עושים זאת כך JSX יכול לזהות אותם באופן שונה מתגי HTML המוגדרים כברירת מחדל.

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

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

�� 8. שים לב למוסכמות השמות האחרות

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

אם ברצונך ליצור פונקציה המגישה טופס, עליך לקרוא לה SubmitForm במקרה גמלים עליון, ולא sendForm, submit_form או submit_form. מקרה גמלים עליון נקרא יותר במקרה מקרה פסקל. הנה המשך רשימת דוגמאות של שמות משתנים ופונקציות במקרה של פסקל.

�� 9. הפרד בין היבטים בין מצב לבין עיבוד

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

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

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

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

יבוא RenderTable מ- ‘./RenderTable’;

טבלת המחלקה מרחיבה את הרכיב {
state = {loading: true};

render () {
const {loading, tableData} = this.state;
טוען להחזיר? :;
}

componentDidMount () {
fetchTableData (). ואז (tableData => {
this.setState ({loading: false, tableData});
});
}
}

�� 10. קוד צריך לבצע כצפוי וניתן לבחינה

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

אתה יכול להשתמש ב- JEST כדי לבדוק את קוד ה- React שלך.

�� 11. כל הקבצים הקשורים לרכיב אחד צריכים להיות בתיקיה יחידה

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

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

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

�� 12. השתמש בכלים כמו Bit

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

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

�� 13. השתמש בספריות קטעי טקסט

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

ישנן ספריות קטעי טקסט רבים שתוכלו להשתמש בהן, כמו ES7 React, Redux, JS Snippets וכו ‘..

✍️ 14. כתוב בדיקות לכל הקוד

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

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

עבור הראשון, אתה יכול להשתמש בריצת בדיקות JavaScript, צחוק כדי לחקות את ה- DOM של HTML באמצעות jsdom לבדיקת רכיבי React. בעוד שמבחן מדויק לחלוטין אפשרי רק בדפדפן במכשיר אמיתי, Jest מספק קירוב טוב לסביבת הבדיקה האמיתית בשלב הפיתוח של הפרויקט שלך..

�� 15. פעל לפי כללי המוך, פירק קווים ארוכים מדי

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

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

מילים אחרונות על התייחסות לשיטות עבודה מומלצות

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

אם יש לך שאלות הקשורות לתגובה, אל תהסס לשלוח אותן בתגובות שלהלן.

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

דוגמאות קוד מאת Andrei Băicuș. עדכוני תוכן מאת שאומיק דייטיארי

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map