PracticU

בניית Custom React Hook

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › בניית Custom React Hook
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
הוק - נקודת חיבור שמאפשרת להריץ קוד מותאם בשלב מסוים של תהליך. ב-React, מנגנון לניהול מצב ויכולות ברכיבים.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
מחרוזת - סוג נתונים שמייצג רצף של תווים, כלומר טקסט, ומשמש לאחסון מילים, משפטים או כל רצף סימנים.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
Northwind - מסד נתונים לדוגמה של מיקרוסופט, המדמה חברת מסחר ומשמש ללימוד ולהדגמת שאילתות SQL.
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
בניית Custom React Hook
כשאותו קוד נחוץ בהרבה קומפוננטות, אפשר לארוז אותו ב-Custom React Hook. בהרצאה בונים hook פשוט שקובע את כותרת הלשונית של הדף במקום ברירת המחדל react-app.
השלבים העיקריים
1. היכן לשים אותו: hook הוא פונקציה, לא קומפוננטה, ולכן מניחים אותו בתיקיית Services שמיועדת לקוד חוזר. הוא עובד רק בתוך Functional Component.
2. שם וחתימה: שם של hook חייב להתחיל ב-use, כאן useTitle. הפונקציה מקבלת מחרוזת title ומיוצאת עם export default. hook יכול להחזיר מה שרוצים, כמו useState שמחזיר מערך, אבל כאן לא צריך להחזיר כלום.
3. למה useEffect: שינוי של document.title הוא side effect, ואסור לבצע אותו ישירות בזמן הרנדר של קומפוננטה. לכן הקוד נכתב בתוך useEffect, ומערך תלויות ריק גורם לו לרוץ פעם אחת, כמו component did mount. hook רשאי להשתמש ב-hooks אחרים.
4. שימוש בדפים: קוראים ל-useTitle בקומפוננטות שהן דף שלם, ושולחים להן כותרת: Northwind Home בדף הבית, Northwind Contact Us ב-Contact Us ו-Northwind Support בדף התמיכה. קומפוננטות כמו layout, shared ו-style אינן דפים ולכן לא מקבלות כותרת.
5. בדיקה: מחליפים בין הדפים ברענון, וכותרת הלשונית מתעדכנת בכל אחד מהם. בהמשך, כשיילמד טיפול בתפריט וב-Routes, ההחלפה תהיה אוטומטית ולא ידנית.
שימו לב
- גם אם הקוד קצר, ה-hook חוסך מכל קומפוננטה את הצורך לכתוב את ה-side effect בעצמה.
אחרי ההרצאה אפשר לכתוב hook משלכם לכל פעולה שחוזרת בכמה קומפוננטות.

פרקי ההרצאה: בניית Custom React Hook

  1. 00:00

    מהו Custom React Hook

  2. 00:42

    בניית useTitle ב-Services

  3. 01:40

    ערך החזרה של ה-Hook

  4. 02:42

    גישה ל-document.title כ-Side Effect

  5. 03:23

    שימוש ב-useEffect בתוך ה-Hook

  6. 04:04

    שימוש ב-useTitle בדפים

תמלול ההרצאה: בניית Custom React Hook

הטקסט המלא של הדקות הראשונות בהרצאה «בניית Custom React Hook» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    היכולת הבאה שלנו לבנות משהו בכדי לבצע שימוש חוזר בקוד זה React. אנחנו יכולים לבנות מה שנקרא Custom React Hook שמבצע איזושהי פעולה כמובן רק ב-Functional Component אבל אז אנחנו יכולים להשתמש עם זה שוב ושוב בכל Functional Component שאנחנו רוצים.

  2. 00:26

    בואו נבנה Custom React Hook ממש ממש פשוט שכל מה שהוא עושה הוא מאפשר לקבוע מה ה-title פה למעלה במקום שיהיה לנו פה title של react-app שכמובן זה לא title שהייתי רוצה באפליקציה שלי react-hook הזאת אנחנו פשוט אומרים לה איזה title והיא עושה את זה.

  3. 00:50

    טוב בואו נבנה את זה עכשיו בגלל שאנחנו לא הולכים לבנות קומפוננט אנחנו הולכים לבנות סוג של פונקציה כי react-hook זה פונקציה ובגלל שזה משהו שהולך לשרת את כל הקומפוננטות בעצם שאנחנו יכולים כל קומפונטה שתרצה להגדיר את ה-Title אז בואו נבנה את זה באזור של ה-Services שגם ככה ה-Services מיועדים לקוד חוזר.

  4. 01:15

    אז בואו ניכנס ל-Services ונוסיף לעצמנו את הפונקציה הזאת וכל React Hook צריכה להתחיל במילה use אז פשוט נתחיל במילה use ו-Title נבנה useTitle נגדיר TS ויש לנו פה סך הכל אפשרות לבנות פונקציה יש לנו פה פונקשן use title ואנחנו בעצם לא מחזירים כלום במקרה הזה שימו לב שריאקט הוק כן יכולה להחזיר מה שבא לנו אם נחזיר סטרינג אז הריאקט הוק תחזיר סטרינג

  5. 01:51

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

  6. 02:21

    use title אז שימו לב שלבנות react hook זה פשוט פונקציה שמתחילה במילה ויכולה לעשות שימוש בתוכה בעוד React Hooks. אז מה אנחנו בעצם רוצים לעשות?

  7. 02:45

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

  8. 03:06

    ואם מישהו יקרא לפונקציה הזאת בתוך functional component, בתוך הרנדר לדוגמה של functional component, זה יהיה side effect בתוך functional component וזה אסור לביצוע.

  9. 03:19

    לכן אנחנו רוצים בתוך ה-react hook שלנו להשתמש עם react hook use effect שלמדנו. ו-use effect אומרת לנו, תשמעו, תנו לי פונקציה, אין פונקציה ואם אתם רוצים להריץ אותה רק פעם אחת כמו component did mount תנו לי פה מערך ריק את כל הדברים האלה ראינו ב-react hooks ועכשיו בתוך הפונקציה תעשו איזה side

  10. 03:47

    effect שאתם רוצים ואני רוצה את זה אז עכשיו מה שבנינו זה פונקציה משלנו שנקראת use title שמקבלת סטרינג ועושה את העבודה הזאת של ה-side effect בשביל לחסוך במי שמשתמש איתנו את הקוד הזה.

  11. 04:07

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

  12. 04:21

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

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: יצירת Higher Order Component עם Class Component

ההרצאה הבאה: ניתוב בריאקט - React Routing

הרצאות קשורות מקורסים אחרים

  • Custom Toast
  • בניית מודל
  • בניית שלב - חלק 1
  • בניית צ'אט באתר

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS