ההוקים של React שמשתמשים בהם יום-יום, מקובצים לפי תפקיד: החזקת state, הרצת אפקטים, memoize של חישובים, שיתוף context וגישה מחוץ לרינדר. כל שורה מחברת את ההוק למה שהוא מיועד לו.
הוק היא פונקציה שמאפשרת לרכיב פונקציונלי להשתמש ביכולות של React: state, מחזור חיים, context וכיוונון ביצועים. שני הכללים: קוראים להוקים ברמה העליונה (אף פעם לא בתוך לולאות או תנאים), וקוראים להם רק מפונקציות React. השאר זה לבחור את ההוק הנכון למשימה.
טבלת עיון · 24 ערכים
הוקים של ReactExplained
24 of 24 rows
מצב
מחזיק ערך בודד שמצית רינדר מחדש כשהוא משתנה.
state מקומי של רכיב: שדות טופס, מתגים, מונים.
מחזיק state שמונע על ידי reducer של פעולות, כמו חנות קטנה.
state עם מספר שדות קשורים או מעברים מורכבים.
מחזיק ערך mutable שלא מצית רינדר מחדש.
מכולות mutable, טיימרים וגישה ישירה ל-DOM דרך .current.
אפקטים
מריץ תופעת לוואי אחרי רינדר, עם ניקוי אופציונלי.
שליפת נתונים, מנויים וסנכרון עם מערכת חיצונית.
הפונקציה שאפקט מחזיר רצה לפני האפקט הבא ושוב בעת ה-unmount.
פירוק מנויים וטיימרים, או ביטול בקשה שעדיין בטיסה.
כמו useEffect, אבל נורה באופן סינכרוני אחרי שינוי ה-DOM.
קריאה או כתיבה של layout לפני שהדפדפן מצייר (toast, tooltip).
מנהלי אירועים רצים בתגובה לפעולת משתמש; אפקטים רצים אחרי רינדר לצורך סנכרון.
לוגיקה שנגרמה על ידי המשתמש שייכת ל-handler, לוגיקה שנגרמה על ידי הרינדר לאפקט.
בפיתוח, מעלה רכיבים פעמיים כדי שאפקטים ירוצו, יתנקו וירוצו שוב.
לתפוס מנויים כפולים וניקוי חסר לפני ה-production.
ביצועים
שומר במטמון ערך מחושב עד שהתלויות שלו משתנות.
הימנעות מחישובים יקרים בין רינדרים; שנו ערך בתלויות בכוונה כדי לנקות את המטמון.
שומר במטמון הפניה לפונקציה עד שהתלויות משתנות.
callback-ים יציבים שמועברים לילדים ממומנים או משמשים כתלויות.
מדלג על רינדר מחדש של רכיב שה-props שלו לא השתנו.
רכיבי ילד כבדים; העבירו פונקציית השוואה כארגומנט שני כששוויון שטחי לא מספיק (HOC, לא הוק).
קונטקסט ונקודות אחיזה חיצוניות
קורא ערך context בלי prop drilling.
ערכת נושא, locale או משתמש מאומת שמשותפים בכל העץ.
מתאים אישית את ה-instance שההורה רואה דרך ref.
חשיפת API ממוקד מרכיב ילד דרך forwardRef.
מקביליות ואחרים
מסמן עדכון state כלא-דחוף כדי שממשק המשתמש יישאר מגיב.
שמירה על קלט זריז בזמן שרשימה כבדה עוברת רינדר מחדש.
דוחה ערך כדי שניתן יהיה להפריע לעדכונים.
debounce לרינדרים יקרים בלי טיימרים.
מייצר id ייחודי ויציב לתכונות נגישות.
קישור label ו-input בין רינדר השרת לרינדר הלקוח.
קורא promise או context במהלך רינדר; ההוק היחיד שאפשר לקרוא לו בתנאי.
פתיחת promise עם Suspense, או קריאת context בתוך return מוקדם.
מחזיק state שמונע על ידי פעולת טופס, כולל דגל pending.
שליחות טופס שמחזירות שגיאות או state מעודכן להצגה מקומית.
מרנדר ערך אופטימי מיד, וחוזר ל-state האמיתי כשהפעולה מסתיימת.
הצגת לייק או הודעה שנשלחה בזמן שבקשת השרת שלה בטיסה.
קורא את מצב ה-pending של ה-<form> שמקיף אותו, בלי props.
כפתור שליחה שמנטרל את עצמו בזמן שהטופס ההורה שלו נשלח.
נרשם לחנות מחוץ ל-React וקורה תמונת מצב אחת עקבית.
API-ים של דפדפן כמו מצב חיבור, או חנויות state של צד שלישי.
רץ לפני אפקטי layout, נועד להזרקת כללי CSS-in-JS.
ספריות סטיילינג שחייבות להזריק כללים לפני קריאת ה-layout.
מציג תווית מותאמת ל-state הפנימי של הוק ב-React DevTools.
תיוג מה הוק מותאם מחזיק בזמן ניפוי שגיאות.
הוק משלכם שמרכיב את המובנים כדי לשתף לוגיקה.
התנהגות stateful לשימוש חוזר כמו useFetch או useMediaQuery.