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

כיצד לשדרג ל-React 18

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

npm להתקין להגיב להגיב-דום

או אם אתה משתמש בחוט:

חוט להוסיף react-dom

לאחר שהתקנת את הגרסה העדכנית ביותר, תוכל להתחיל לנצל את התכונות החדשות שלה.

ישנן מספר תוספות ב-React 18; הנה ארבעה מהבולטים ביותר.

1. מצב קפדני

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

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

יְבוּא לְהָגִיב מ 'לְהָגִיב';
פוּנקצִיָההדגמה לדוגמה() {
לַחֲזוֹר (
<div>
<FirstComponent />
<לְהָגִיב. StrictMode>
<SecondComponent />
<רכיב שלישי />
</React.StrictMode>
<רכיב רביעי />
</div>
 );
}
instagram viewer

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

StrictMode עוזר גם בדרכים אחרות, כגון:

  • זיהוי רכיבים בעלי מחזור חיים לא בטוח: אם לרכיב יש שיטת מחזור חיים המסומנת כלא בטוחה, מצב קפדני יזהיר אותך על כך.
  • אזהרה לגבי שימוש ב-API במחרוזת מדור קודם: אם אתה משתמש ב-Ref API של מחרוזת מדור קודם, המצב המחמיר יזהיר אותך לגבי השימוש בו.
  • אזהרה לגבי שימוש ב-findDOMNode שהוצא משימוש: אם אתה משתמש ב-findDOMNode API שהוצא משימוש, המצב המחמיר יזהיר אותך על כך.
  • זיהוי תופעות לוואי בלתי צפויות: אם רכיב גורם לתופעות לוואי (כגון setState) במקומות בלתי צפויים, המצב הקפדני יזהיר אותך על כך.
  • זיהוי ממשק API של הקשר מדור קודם: אם אתה משתמש ב-API ההקשר מדור קודם (שהוצא כעת משימוש), המצב המחמיר יזהיר אותך על כך.
  • הבטחת מצב לשימוש חוזר: אם יש לך מצב המשמש רכיבים מרובים, מצב קפדני יעזור להבטיח שהוא מסונכרן כראוי.

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

2. מעברים

מעברים מאפשרים לך לסמן עדכוני ממשק משתמש מסוימים כלא דחופים. המשמעות היא ש-React יכולה לתעדף עדכונים אחרים שהם חשובים יותר.

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

אתה יכול להשתמש בפונקציה startTransition כדי לסמן עדכון ממשק משתמש כמעבר. הנה דוגמה:

יְבוּא { startTransition } מ 'לְהָגִיב';
startTransition(() => {
// סמן כל עדכוני מצב לא דחופים בפנים כמעברים
});

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

3. אצווה אוטומטית

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

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

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

4. הוקס חדשים

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

React 18 מספק ביצועי אפליקציה משופרים

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