היכרות עם Hooks

Hooks הם תוספת חדשה בריאקט 16.8. הם נותנים לנו להשתמש בסטייט ובתכונות אחרות של ריאקט מבלי לכתוב מחלקות.

import React, { useState } from 'react';

function Example() {
  // הצהרת משתנה סטייט שנקרא "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

הפונקציה החדשה useState היא ההוק הראשון שעליו נלמד, והדוגמא הזו היא רק הצצה אליו.

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

הערה

ריאקט 16.8.0 היא הגרסה הראשונה שתומכת בהוקים. בעת שדרוג אליה, שים לב לעדכן את כל החבילות, כולל React DOM. ישנה תמיכה בהוקים ב-React Native מאז גרסה 0.59.

סרטון מבוא

ב React Conf 2018, Sophie Alpert ו-Dan Abramov הציגו את הנושא של הוקים, ואחריהם Ryan Florence הראה איך לשכתב אפליקציית ריאקט על מנת שתעשה שימוש בהם. צפו בסרטון:

אין שינויים ששוברים תאימות לאחור

לפני שנמשיך, שימו לב שהוקים הם:

• בגדר בחירה. ניתן לכתוב הוקים בכמה קומפוננטות מבלי לשכתב אף קוד קיים. בנוסף אין חובה ללמוד עליהם או להשתמש בהם.
• תואמים לאחור ב100%. הם לא גורמים לbreaking changes.
• זמינים עכשיו. ניתן לכתוב הוקים לאחר שחרור גרסה 16.8.0.

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

ההוקים לא משנים שום דבר בקונספטים העיקריים של ריאקט. אדרבא, הם מספקים API ישיר יותר לקונספטים בריאקט שאנו מכירים: props, state, context, refs ומעגל החיים(lifecycle). כפי שנראה בהמשך, הוקים מאפשרים לנו דרך חדשה וחזקה לשלב בין הקונספטים הללו.

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

המניע

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

קשה לעשות שימוש חוזר בלוגיקה בין קומפוננטות

ריאקט אינה מציעה דרך ״לקשר״ פעולה חוזרת לקומפוננטה (לדוגמה, לחבר אותה ל-store). אם עבדת עם ריאקט זמן מה, כנראה שאתה מכיר פיצ׳רים כמו render props ו-higher-order components שמנסים לפתור את זה. הבעיה היא שהם דורשים ארגון מחדש של הקומפוננטות בעת השימוש בהן, מה שיכול להיות מסובך ומקשה על מעקב אחרי קוד. אם נתבונן על אפליקציית ריאקט רגילה דרך React DevTools, רוב הסיכויים שנראה סוג של “wrapper hell” של קומפוננטות שעטופות בשכבות של providers, consumers, higher-order components, render props ועוד. אפילו שניתן לסנן אותם בdev tools, זה מצביע על בעיה עמוקה יותר: ריאקט צריכה בסיס טוב יותר לשיתוף לוגיקה.

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

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

קומפוננטות מורכבות הופכות קשות להבנה

לעיתים קרובות נאלצנו לתחזק קומפוננטות שהתחילו כפשוטות וגדלו לבלאגן בלי נשלט של לוגיקה ו-side effects. כל מתודת lifecycle הכילה לעיתים קרובות ערבוב של לוגיקה לא קשורה. לדוגמה, קומפוננטות עשויות למשוך מידע בcomponentDidMount וב-componentDidUpdate. למרות זאת, אותה מתודת componentDidMount עשויה להכיל גם לוגיקה לא קשורה שמגדירה event listeners, עם ניקיון שלהם ב-componentWillUnMount. קטעי קוד שקשורים אחד לשני מתפצלים, אבל קוד שלחלוטין איננו קשור מתאחד במתודה אחת. זה גורם קל לבאגים ולחוסר עקביות.

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

על מנת לפתור זאת, הוקים נותנים לנו לפצל חלקים קשורים של קומפוננטה לפונקציות קטנות יותר (לדוגמה setup לsubscription או fetch למידע), במקום להיות מוכרחים לפצל בתוך מתודות lifecycle במחלקה. ניתן גם לנהל את הסטייט המקומי של הקומפוננטה עם reducer.

נדון על כך בהרחבה בשימוש בEffect Hook

מחלקות מבלבלות גם אנשים וגם מחשבים

בנוסף לעשיית קוד קשה יותר לשימוש חוזר ולארגון שלו, מצאנו שמחלקות עלולות להוות חסם ללימוד ריאקט. צריך להבין איך this עובד בJavaScript, מה ששונה מאוד מרוב שפות התכנות. בנוסף חייב לזכור לעשות bind לevent handlers. בלי שימוש בפלאגינים לא יציבים של syntax, הקוד מאוד ארוך. אנשים שלומדים ריאקט יכולים להסתדר עם קונספטים כמו props, state ו-flow של מידע מלמעלה למטה בקומפוננטות, אבל עדיין מתקשים עם מחלקות. ההבחנה בין קומפוננטות מחלקה לקומפוננטות פונקציה בריאקט ומתי להשתמש בכל אחת מוביל לחילוקי דעות אפילו בין מפתחי ריאקט מנוסים.

בנוסף, ריאקט כבר קיימת יותר מ5 שנים, ואנחנו רוצים שתישאר רלוונטית גם ל5 השנים הבאות. כפי שSvelte, Angular, Glimmer, ואחרים הראו, יש לקומפילציה מבעוד מועד של קומפוננטות הרבה פוטנציאל. במיוחד אם זה לא מוגבל לtemplates. לאחרונה, התנסנו עם component folding באמצעות Prepack, וראינו תוצאות מבטיחות. לעומת זאת, מצאנו שקומפוננטות מחלקה יכולות לעודד שימושים שמחלישים את שיפורים אלו. מחלקות גם גורמות לבעיות בכלים של היום. למשל, minifying של מחלקות לא עובד בצורה טובה, וגורם לפיצ׳רים כמו hot reloading לבעיות יציבות. אנחנו רוצים לאפשר API שנותן לעשות אופטימיזציות לקוד.

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

דוגמאות

הצצה ל-Hooks הוא התחלה טובה ללמידה של הוקים.

אסטרטגיית אימוץ הדרגתי

אמ;לק: אין תוכניות להוציא את המחלקות מריאקט.

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

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

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

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

שאלות נפוצות

הכנו עמוד שאלות נפוצות של הוקים שעונה על השאלות הנפוצות ביותר עליהם.

הצעדים הבאים

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