PracticU

הסבר על React Hooks

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הסבר על React Hooks
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
הוק - נקודת חיבור שמאפשרת להריץ קוד מותאם בשלב מסוים של תהליך. ב-React, מנגנון לניהול מצב ויכולות ברכיבים.
תנאי - ביטוי לוגי בקוד שתוצאתו אמת או שקר, וקובע אילו פקודות יתבצעו בהתאם לערכו.
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.
DOM - ייצוג עץ של מבנה דף HTML בזיכרון, שמאפשר לקוד לקרוא ולשנות את תוכן הדף ומבנהו.
הסבר על React Hooks
React Hooks הן פונקציות מיוחדות, לא אותו דבר כמו Life Cycle Hooks, שמוסיפות ל-Functional Components יכולות שבעבר היו שמורות ל-Class Components בלבד.
מה הן נותנות
1. ניהול state: בעבר אפשר היה לנהל state רק ב-Class Component. Hooks מאפשרים לנהל state גם ב-Functional Component, כך ששני סוגי הקומפוננטות יכולים לעשות זאת.
2. חיקוי Life Cycle: חלק מה-life cycle hooks של Class Component (כמו componentDidUpdate, componentDidMount, componentWillUnmount) אפשר כעת להריץ גם בפונקציונל קומפוננט דרך הפונקציות המיוחדות.
חוקים לשימוש
1. רק בתוך Functional Component: שימוש ב-Hook בתוך Class Component גורם לשגיאת הרצה.
2. רק ישירות בקוד הקומפוננטה: אי אפשר לקרוא ל-Hook מתוך אזור כללי או מתוך פונקציה שנמצאת בתוך הקומפוננטה - רק ישירות בגוף הפונקציונל קומפוננט.
3. אסור בתוך תנאים או לולאות: זה bad practice, כי React צריך להפעיל את ה-Hooks באופן עקבי בכל רינדור.
4. שם מתחיל ב-use: כל Hook חייב להתחיל במילה use, לא רק כמוסכמה אלא כדרישה של המערכת.
Hooks נפוצים שהוזכרו
useState לניהול state, useEffect להרצת side effects שמדמים life cycle hooks, useRef לגישה ל-DOM, useContext לקבלת אובייקט קונטקסט שהועבר מקומפוננט אב, useMemo להריץ מחדש רק כשתלות (dependency) השתנתה, ו-useForm לניהול טפסים.
בסרטונים הבאים נראה איך עובדים בפועל עם כמה מה-Hooks האלה.
השיעור הבא בקורס: הסבר על useState ב-React Hooks

פרקי ההרצאה: הסבר על React Hooks

  1. 00:00

    מה הם React Hooks

  2. 00:54

    הרצת Life Cycle Hooks בפונקציה

  3. 01:31

    כללי השימוש ב-Hooks

  4. 02:11

    הפונקציות useState ו-useEffect

תמלול ההרצאה: הסבר על React Hooks

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

  1. 00:02

    בואו נבין מה זה בעצם React Hooks דבר ראשון React Hooks זה לא Life Cycle Hooks זה שני מונחים שונים לגמרי אז מה זה React Hooks React Hooks אלו פונקציות מיוחדות שניתנות לשימוש רק בתוך Functional Components במקור הוסיפו אותם בשביל להוסיף איזושהי יכולת מסוימת שהייתה רק ב-Class Component ולא הייתה ב-Functional Component ורצו להוסיף

  2. 00:29

    אותה לתוך Functional Component לדוגמה ניהול state יכלנו לנהל state רק בתוך class component לא היינו יכולים לנהל state בתוך functional component כעת יש איזושהי פונקציה מיוחדת אנחנו כמובן נראה איך עובדים איתה שמאפשרת לנו כן לנהל state בתוך functional component גם כן אבל

  3. 00:46

    עכשיו אנחנו יכולים לנהל state בשני סוגי הקומפורננטים זה דבר אחד דבר נוסף היה לנו אפשרות להריץ life cycle hooks לדוגמה ב-class קומפוננט, קומפוננט did update, קומפוננט did mount, קומפוננט will unmount, כל ה-life cycle hooks האלה.

  4. 01:05

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

  5. 01:16

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

  6. 01:35

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

  7. 02:04

    מספר פונקציות כאלה שהן מאוד נפוצות לשימוש use state זאת הפונקציה שמאפשרת לנהל state בתוך functional component use effect מאפשרת להריץ או לדמות מספר life cycle hooks בתוך functional קומפוננט היא זאת שמסוגלת להריץ כאילו שאנחנו מריצים את קומפוננט did mount, קומפוננט did update

  8. 02:30

    וקומפוננט will unmount, use effect הרעיון זה להריץ side effect ולזה נקראת use effect. use ref מאפשרת לנו לגשת לדום מתוך

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

ההרצאה הקודמת: הגדרת Theme ב-Material UI

ההרצאה הבאה: הסבר על useState ב-React Hooks

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

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