פונקציה useRef ב-React Hooks

בלי כתוביותעם כתוביות

מילון מושגים:

React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.

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

אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.

DOM - ייצוג עץ של מבנה דף HTML בזיכרון, שמאפשר לקוד לקרוא ולשנות את תוכן הדף ומבנהו.

תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.

TypeScript - שפת תכנות המרחיבה את JavaScript בהוספת טיפוסים, ומתקמפלת ל-JavaScript רגיל.

קומפיילר - תוכנה שממירה קוד מקור שנכתב בשפת תכנות לקוד שהמחשב יכול להריץ, ומדווחת על שגיאות תחביר.

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

פונקציה useRef ב-React Hooks

useRef הוא React Hook שמאפשר להגיע לאובייקט שקיים ב-DOM, בדומה ל-createRef שהיה בשימוש בקלאס קומפוננט, כדי לקרוא לפונקציות מיוחדות כמו play ו-pause על אלמנט audio.

השלבים העיקריים

1. בניית המשתנה עם useRef: במקום createRef, קוראים ל-useRef ושומרים את התוצאה במשתנה מסוג RefObject של HTMLAudioElement.

2. חיבור ה-ref לאלמנט: משתמשים במשתנה הזה בלי this, ומחברים אותו לתגית ה-audio ב-JSX.

3. בעיית טיפוסים ב-TypeScript: TypeScript מתלונן כי הערך יכול להיות גם null או undefined, ולכן יש שתי דרכים לפתור: לציין במפורש שהטיפוס יכול לקבל null/undefined, או לעדכן את קובץ ההגדרות.

4. הפתרון הנבחר - tsconfig: מוסיפים לקובץ tsconfig באזור ה-compilerOptions את ההגדרה strictNullChecks: false, כך שהקומפיילר מאפשר הכנסת null ו-undefined בלי הגדרה מפורשת בכל מקום.

שימו לב

useRef נדיר יותר בשימוש בהשוואה ל-useState ול-useEffect, אבל פותר צורך אמיתי: גישה לפונקציות שקיימות רק על האלמנט עצמו ב-DOM, לא על אובייקט React רגיל.

כך אפשר להפעיל פקודות כמו play ו-pause על אלמנט audio גם ב-Functional Component.

פרקי ההרצאה: פונקציה useRef ב-React Hooks

תמלול ההרצאה: פונקציה useRef ב-React Hooks

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

00:02
פונקציית ה-react hook הבאה שאנחנו הולכים לראות נקראת useRef useRef מאפשרת לנו להגיע לאובייקט שקיים בדום כי אנחנו רוצים להגיע לאיזושהי פונקציונליות מסוימת שיש רק בו ולא בסטנדרט רגיל של אובייקטים ב-react אנחנו עשינו דוגמה כזאת וזה היה אודיו כאשר אנחנו בנינו את האודיו
00:30
ראינו שיש לנו אלמנט אודיו זה שיש לו פונקציות מיוחדות ששייכות אליו ספציפית, לדוגמה play, pause, load, ואנחנו רוצים להגיע אליהם.
00:43
לצורך כך אנחנו צריכים להגיע לאובייקט עצמו בדום. אז היה לנו פה את ה-createRef הזאת, ששייכת ל-react, אנחנו רואים את זה כאן, והיא אפשרה ללכת ולהביא את האובייקט ואז יכלנו להשתמש בו.
00:59
אנחנו רוצים לבצע משהו דומה, אבל ב-functionalComponent. ב-functionalComponent אנחנו לא משתמשים ב-createRef, אנחנו משתמשים ב-UseRef אז יש כל מיני פונקציות ReactHooked כאלה שמאפשרות לנו לבצע דברים קצת יותר נדירים לשימוש אבל שהיינו יכולים לעשות אותם ב-Class Component,
01:19
איך אנחנו בדיוק עושים אותם ב-Functional Component זה בעצם מה שהפונקציות האלה באות לפתור. בואו נבנה את ה-Component הזה על ידי פונקשן פונקשן אודיו זאת פונקציה והיא היא מחזירה gsx-element ואנחנו רוצים לחשוף אותה החוצה ומה שאנחנו רוצים זה להחזיר ממנה את זה, הנה יש לנו כאן את הקוד ואנחנו רוצים כאן את המשתנה הזה אבל אנחנו לא יכולים להשתמש
01:57
ב-create-rף אז בואו קודם כל נבנה לעצמנו את המשתנה, פה אנחנו רוצים לבנות אותו, נבנה אותו עם קונסט כמובן, אודיו רף מסוג רף אובייקט של html אודיו אלמנט משהו חסר לי מה חסר לי קודם כל זה שווה כמובן וחסר לי את זה שלושת אלה בואו ניקח את שלושת אלה נשים פה
02:36
ונבצע פה איזושהי הפרדה ביניהם אלה נוריד קומפוננט אין לי קריאיט רף אין לי יש לי רף אובייקט זה זה והדבר הזה, רגע, רגע, זה כן סוג, טעות שלי, זה כן סוג, והוא שווה ל... הנה הפונקציה useRef, פשוט פונקציית ReactHook שאומרת לי, תשמע, אני בעצם יוצרת לך את האובייקט הזה ומביאה
03:20
לך אותו, ואז אנחנו פשוט יכולים להשתמש בו כאן בלי ה-dis. אנחנו רוצים לבוא ולהגיד שהוא שווה לאודיו רף, אין לנו פה את הדיסס, אין לנו פה את הדיסס הזה ואין לנו פה את הדיסס הזה.
03:42
מה הוא רוצה מאיתנו? Problems. All right, אז מה שבעצם אני רואה שקורה כאן זה ש-UseRef בעצם יכולה להחזיר גם את האודיו אלמנט כמו שאנחנו רוצים ממנה במקרה הזה, אבל גם נאל או אונדיפיינד, זאת אומרת שאנחנו יכולים לפתור את הבעיה הזאת בשתי שיטות.
04:15
שיטה ראשונה להגיד שהסוג נתונים הוא גם נאל וגם אונדיפיינד, כלומר יכול להיות או זה או זה או זה, וזה אומר שבכל מקום שאנחנו רוצים לתאר שמשהו יכול לקבל נאל או אונדיפיינד אנחנו צריכים לציין את זה בצורה מפורשת.
04:37
הנה הבעיה קצת נפתרה, לפחות פה. זה לא משהו שאנחנו כל כך רוצים לעשות. אנחנו רוצים שנל ואנדיפיינד יהיו טיפוסי נתונים שהמערכת תאשר להכניס לתוכם דאטה.
04:54
זאת אומרת, אני לא צריך להגדיר שהדבר הזה יכול לקבל נל, זה ברור שהוא יכול לקבל נל. אני לא רוצה להגדיר שהוא יכול לקבל אנדיפיינד, זה ברור שהוא יכול לקבל אנדיפיינד.
05:03
אבל טייפסקריפט חוסמת אותנו. מה שנעשה זה נפתור את זה על ידי tsconfig. קונפיג זה קובץ קונפיגורציה עבור שפת טייפ סקריפט, יש לנו פה קומפיילר אופצ'אנס ואנחנו רוצים לגשת ולהוסיף פה עוד אופציה והאופציה שאנחנו רוצים להוסיף לקומפיילר זה strict null checks false זה בעצם