חושבים לנסות קידוד עם React? להלן תכונות עיקריות חדשות לניסיון ב-React 18.

React היא ספריית JavaScript פופולרית מאוד בקוד פתוח שנוצרה על ידי פייסבוק ב-2013. בשל הגמישות שלו, מפתחים רבים רותמים חלק מהתכונות שלו בבניית רכיבי ממשק משתמש (UI) מהירים, יעילים וניתנים לשימוש חוזר.

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

התכונות החדשות ב-React 18

React 18 מורכב מכמה תכונות חדשות שימושיות שנוספו ל- ספריית JavaScript בקוד פתוח. רבים מהשינויים הללו לא היו בגרסה הקודמת, בעוד שתכונות אחרות שופרו. חלק מהתכונות הללו כוללות; שורש API חדש, אצווה אוטומטית, Transition API, Suspense API ושחרור של Hooks חדשים.

API חדש לשורש

ה-API של השורש ב-React עוקב אחר האופן שבו הרכיב ברמה העליונה מוצג בעץ. בגרסאות הקודמות של React, ה לְדַקלֵם השיטה שימשה לביצוע רינדור שנקרא כעת ממשק API השורש מדור קודם.

עם זאת, React 18 מגיע עם API שורש חדש שיוצר שורש באמצעות ה- createRoot מתודה ולאחר מכן מעבד רכיב React לשורש שנוצר באמצעות ה- לְדַקלֵם שיטה.

instagram viewer

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

הקטע שלהלן מראה כיצד בנוי ממשק ה-API של השורש הן בדרכים הישנות והן בדרכים חדשות.

מדור קודם של Root API

יְבוּא ReactDOM מ'תגובה-דום';
יְבוּא אפליקציה מ'./אפליקציה';
ReactDOM.render(<אפליקציה />, מסמך.getElementById('אפליקציה'))

API חדש לשורש

יְבוּא ReactDOM מ'react-dom/client';
יְבוּא אפליקציה מ'./אפליקציה';
const root = ReactDOM.createRoot(מסמך.getElementById('אפליקציה'));
root.render(<אפליקציה />)

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

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

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

יְבוּא { flushSync } מ'תגובה-דום';
פוּנקצִיָהhandleClick() {
 flushSync(() => {
 setCount(לספור => לספור + 1);
]});
 flushSync(() => {
 setStore(חנות => !חנות);
});
}

ממשק API למעבר

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

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

יְבוּא { startTransition } מ"לְהָגִיב";
startTransition(() => {
 setSearch (קלט);
});

מֶתַח

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

כדי לפתור בעיה זו, React 18 מספק שתי תכונות חדשות של עיבוד צד שרת (SSR) באמצעות מֶתַח רְכִיב;

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

הוקס חדשים

נקודת מפנה אחת גדולה עבור React הייתה ההקדמה של הוקס ב-React גרסה 16 המאפשרת לרכיבי פונקציה לגשת למצבים ולתכונות React אחרות מבלי לכתוב מחלקות. ה-React 18 נשלח עם חמישה ווים חדשים כדי לשפר את חוויית המפתחים;

  • useId: הוק הזה מאפשר לנו ליצור מזהה ייחודי (ID) באפליקציה שלנו הן בשרת והן בלקוח.
  • useTransition: הוא משמש לצד startTransition כדי ליצור עדכון מצב חדש שניתן לכנותו לא דחוף.
  • useDefferedValue: הוא מאפשר דחיית עדכונים שהם פחות דחופים.
  • useSyncExternalStore: הוק זה שימושי בעת יישום מנויים למקורות נתונים חיצוניים.
  • useInsertionEffect: הוק זה מוגבל למחברי ספריית CSS-in-JS להזרקת סגנונות ל-DOM.

כיצד לעדכן ל-React 18

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

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

אוֹ

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

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

כיצד להגדיר פרויקט React 18 חדש

כדי להגדיר פרויקט React 18 חדש, חבילת create-react-app מותקנת עם npm או yarn בטרמינל;

npx לִיצוֹר-react-app my-react-app

אוֹ

להוסיף חוט לִיצוֹר-react-app my-react-app

שפר את ביצועי האפליקציה שלך עם React 18

עכשיו אתה יודע על כמה תכונות חדשות ב-React 18 כמו ה-API החדש של השורש, Suspense, Transition או Automatic Batching, וכיצד לשדרג לגרסה החדשה הזו ולהגדיר אותה מאפס.

השינויים האחרונים ב-React מוכנים עבורך לחוות כבר עכשיו.