לפני שנתחיל ונצלול לעומק הדברים, מה זה בכלל props?
רב הקומפוננטות יהיו ניתנות לקיסטום בזמן שהם נוצרות בעזרת קבלת פרמטרים שונים. הפרמטרים שאנחנו מעבירים לקומפוננטה נקראים props שזה קיצור של properties.
כעת שאנחנו יודעים מה זה props בואו נראה דוגמא מאוד פשוטה בקומפוננטה מסוג קלאס ומסוג פונקציה
רגע אבל מה יקרה אם לא נעביר props לקומפוננטה? אם נתייחס ל-props שלא קיים אז ריאקט תתייחס לזה כאל undefined. ובעצם במסך יודפס ",hello"
איך מונעים את זה?
כדי למנוע את המצב הנל יש לנו שתי אופציות
- defaultProps
- ES6 default value
defaultProps
defaultProps מגיע כמשהו מובנה בריאקט ואין לנו שום צורך בהתקנת ספריה כדי להשתמש בו. השימוש בו הוא כשמו- לתת ערכים דיפולטיביים ל-props, כך נוכל להמנע ממצב של prop שהוא undefined. הגיע הזמן לדוגמא
כעת נראה את השימוש של defaultProps בפונקציה(אין בעצם שום שינוי)
צורה נוספת שנוכל להשתמש בה בקלאסים היא הגדרה של defaultProps כ- static prop.
לשם כך נצטרך את הפלגין transform-class-properties של Babel. אם אתם משתמשים ב- create-react-app זה מגיע כבר מובנה. בואו נראה דוגמא.
ES6 default values
אופציה נוספת שבה אנחנו יכולים להשתמש בפונקציות בלבד היא לשים ערכים דיפולטיביים באמצעות ES6. כעת ניקח את אותה קומפוננטה ונשנה אותה קצת, הפעם נעביר שתי משתנים.
כן זה כל כך פשוט 🙂
אז במה נשתמש? ומתי?
כמו תמיד בתכנות אין תשובה חד משמעית והכל תלוי במערכת שלנו ובקוד שלנו
יתרונות וחסרונות
כעת נסקור מספר יתרונות וחסרונות וכך נדע לבחור במה הכי מתאים לנו
defaultProps
- היתרון העיקרי שיש ל- defaultProps הוא בכך שהוא נותן לנו דרך אחידה להגדיר ערכי ברירת מחדל ל-props גם בקלאסים וגם בפונקציות
- היתרון השני הוא שהסינטקס נורא פשוט וברור
- החסרון הוא שריאקט הולכת לכיוון ה- functional component ולא בטוח כמה עוד נוכל להשתמש ביכולת הזאת בעתיד. כבר בגרסא האחרונה נוספה אזהרה ש-default props בתהליך להיות deprecated בקומפוננטות מסוג פונקציה.
ES6 default values
- היתרון העיקרי הוא ש-ES6 default values הוא סינטקס נייטיבי שנתמך כמעט בכל הדפדפנים
- סינטקס פשוט ונח.
- היתרון בחלק הקודם הפך לחסרון פה- אם יש לנו באפליקציה קומפוננטות מסוג קלאס יווצר לנו שוני בדרך בה אנחנו נעביר ערכים דיפולטיביים(לדעתי הבעיה הזו תלך ותעלם לאט לאט ככל שיגבר השימוש בהוקס אך אין ספק שכרגע זה שיקול)
לסיכום
- ריאקט defaultProps נותנת לנו דרך אחידה להעביר props דיפולטיביים.
- ככל שיהיו יותר props שמועברים ריאקט defaultProps תאט את הקומפוננטה
- הצוות של ריאקט החליט ללכת עם האופציה של ES6 ולכן נראה warning כאשר נשתמש ב- defaultProps בפונקציות.
- אם יש לנו אפליקציה קיימת שעושה שימוש גם בקלאסים וגם פונקציות נעדיף להשתמש בדרך אחת להעברת ערכים דיפולטיביים(defaultProps)
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
