React High Order Component

המאמר הזה מיועד למפתחי React. עוד אין לך רקע ב 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.

מאמרים נוספים

הקורסים הקרובים

קורס Full Stack

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

קורס Node.JS

קורס זה הינו הקורס הפרקטי והמתקדם בארץ לפיתוח Web Applications מבוססי Node.JS. Express.JS . למעשה, בקורס זה נכסה את שלושת מארבעת החלקים המרכיבים את ה Full Stack...

קורס Python

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

קורס React

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

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

דילוג לתוכן