המאמר הזה מיועד למפתחי React. עוד אין לך רקע ב React ? לחץ על הכפתור לקבלת פרטים על הקורס הקרוב.
אני מזמין אותך להצטרף לקבוצת הידע ולקבל עדכונים על תכנים חדשים, סרטוני הדרכה, Webinars טכנולוגיים ו Meetups קרובים.
במאמר זה אסביר את המושג High Order Component לכל מפתחי ה React שאינם מכירים (למרות שסביר להניח שעושים שימוש, גם אם לא במודע, לפחות כשהם מטמיעים Redux).
מה זה React High Order Component ?
המושג High Order Component מאוד דומה למושג אחר בעולם התוכנה, בשם High Order Function – פונקציה מסדר גבוה. מושג זה מתאר פונקציה ש״עוטפת״ פונקציה אחרת, לדוגמה פונקציית map ב Java Script (שמקבלת פונקציה אנונימית כפרמטר).
בנוסף, כל מי שעבד פעם עם ה Decorator Design Pattern יימצא את הדבר מאוד דומה.
הרעיון הוא ליצור React Component שעוטף Component אחר. המטרה – לשתף פונקציונליות בין מספר לComponents ללא שכפול קוד.
למעשה, HOC הוא לא באמת Component כי אם פונקציה. פונקציה המקבלת Component קיים כפרמטר ומחזירה Component אחר, מורחב יותר (מוטיב החוזר ב Decorator Design Pattern ).
סכמטית, זה נראה כך :
מימושים מוכרים ל React HOC
כשאנו מפתחים אפליקציה ב React,לא מעט אנו עושים שימוש בMiddlewares fכגון עבודה עם Redux,עם Routing (באפליקציות מבוססות Single Page Application).
פונקציית connect לדוגמה, בהטמעת Redux, מקבלת כפרמטר את ה Component שלנו ומחזירה Component חדש היודע לעבוד עם שכבת ב Store, ה Reducer וכו.
הפונקציה withRouter מזריק את המידע של ה Router באפליקציה. אל תוך ה Components שלנו. ואלו הן רק 2 דוגמאות (די ידועות)
React OHC Pattern
תבנית HOC והמימוש שלה נראית כך :
ה HOC הוא למעשה פונקציה המקבלת כפרמטר Component בשם WrappedComponent ומחזירה Component חדש בשם HOC. לבסוף, אנו יוצרים Instance בשם SimpleHOC.
בואו נראה שימוש אמיתי ב HOC:
יש לנו HOC שיודע לקבל Component ולהעביר ל props שלו ברכה כלשהי.
ועכשיו ניצור component שמציג ברכה לשם כלשהו (לדוגמה “Good Morning Dans”)
אנו רואים שה HOC למעשה יוצר ״הרחבה״ ל component הרגיל ומוסיף את הברכה שקיבל דרך ה props. זה בדיוק מה שעושה Design Pattern בשם Decorator.
עד כאן.
חדשים ב React ?
React היא ספרייה מבית Facebook המאפשרת לנו לבנות את צד ה UI ( ה Front End) בצורה מהירה יותר, נוחה יותר ומעל הכל – מודולרית הרבה יותר. הרעיון בבסיס הספרייה הוא לזהות חלקי UI בהם אפשר לעשות שימוש חוזר ולבנות אותם כיחידה עצמאית בשם Component. יחידה זו ניתן לשימוש חוזר ולהרחבה (הורשה) והיא למעשה מספקת יישום עצמאי שמצד אחד מרנדר לנו אזור ב UI, ומצד שני הוא בעל מחזור חיים המאפשר לממש פונקציונליות ולנהל את המידע הפנימי שלו הדרוש לשירותים שהוא מספק. ישנם סוגי Component שונים ויש ללמוד את ההבדלים ביניהם על מנת להשתמש בהם בצורה אופטימלית. ספריית React היא למעשה המתחרה הגדולה של Angular, ה Framework מבית Google, גם הוא לצורך פיתוח ה Front End בצורה שהיא Component Driven.
