בלוג

React v18.0

29 במרץ 2022 מאת צוות React

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

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

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

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

למקרה שפספסתם, חלקנו הרבה מהחזון הזה ב-React Conf 2021:

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

Note

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

מה זה בעבודה React?

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

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

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

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

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

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

דוגמה היא נוספת state להשתמש חוזר. גם React יכול חלקים של ממשק משתמש מהמסך, ואז להוסיף אותם בחזרה מאוחר יותר תוך שימוש חוזר ב-state הקודם. לדוגמה, כאשר user מתרחק מהמסך ובחזרה, React אמור להיות מסוגל לשחזר את המסך הקודם state בו היה קודם. בקטינה הקרובה, אנו מתכננים להוסיף רכיב חדש בשם <Offscreen> שמיישם את הדפוס הזה. באופן דומה, תוכל לבצע use מחוץ למסך כדי להכין ממשק משתמש חדש ברקע כך שהוא מוכן לפני שה-user חשוף אותו.

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

אימוץ בהדרגה פונקציה

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

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

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

לאחר שתשדרג ל-React 18, תוכל להתחיל להשתמש בהתאמה מתאימה. לדוגמה, אתה יכול use startTransition כדי לנווט בין מסכים ללא לחסום קלט user. או useDeferredValue כדי למנוע עיבודים חוזרים יקרים.

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

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

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

Suspense במסגרות נתונים

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

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

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

רכיבי שרת עדיין בפיתוח

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

רכיבי שרת עדיין ניסיוניים, אך אנו מצפים לשחרר גרסה ראשונית במדורה משנית של 18.x. היום, אנחנו עובדים עם מסגרות כמו Next.js, מימן ורמיקס כדי לקדם את ההצעה ולהכין אותה לאימוץ רחב.

מה חדש בReact 18

תכונה חדשה: אצווה אוטומטית

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

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

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

תכונה חדשה: מעברים

מעבר הוא מושג חדש ב-React כדי להבחין בין עדכונים דחופים ללא דחופים.

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

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

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

בדרך כלל, עבור חוויית user הטוב ביותר, קלט בודד של user אמור לגרום לעדכון דחוף וגם לא דחוף. אתה יכול use startTransition API בתוך אירוע קלט כדי לידע React אילו עדכונים דחופים כאשר הם “מעברים”:

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

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

  • useTransition: Hook כדי להתחיל מעברים, כולל ערך למעקב אחר ה-state הממתין.
  • startTransition: שיטה להתחיל מעברים כאשר ה-Hook לא יכול להיות used.

מעברים יבחרו לעיבוד פעולה, מה אפשר להפריע לעדכון. אם התוכן מושעה מחדש, מעברים גם אומרים לReact להמשיך ולהציג את התוכן הנוכחי תוך עיבוד תוכן המעבר ברקע (ראה את [Suspense RFC](Suspense למידע נוסף).

ראה מסמכים למעברים כאן.

Suspense תכונות חדשות

Suspense לאפשר לך לציין את הטעינה state עבור חלק מעץ הרכיבים אם הוא עדיין לא מוכן להראות:

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

Suspense גורם את “טעינת משתמש state” למושג הצהרתי ממדרגה ראשונה במודל התכנות React. אנחנו יכולים לבנות עליו תכונות ברמה גבוהה יותר.

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

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

Suspense ב-React 18 עובד הכי טוב בשילוב עם המעבר API. אם תשעה מעבר, React ימנע את החלפת התוכן הנראה לעין ב-fallback. במקום זאת, React יעכב את העיבוד שיטענו מספיק נתונים כדי למנוע טעינה לא טובה של state.

למידע נוסף, עיין ב-RFC עבור Suspense ב-React 18.

עיבוד חדש של לקוח ושרת APIs

במהדורה זו ניצלנו את ההזדמנות לעצב מחדש את ה-APIs שאנו חושפים לעיבוד בלקוח ובשרת. שינויים אלו מאפשרים ל-users להמשיך להשתמש ב-APIs הישנים במצב React 17 בזמן שהם משדרגים ל-APIs החדשים ב-React 18.

React DOM לקוח

ה-API החדשים האלה מיוצאים כעת מ-react-dom/client:

  • createRoot: שיטה חדשה ליצירת שורש ל-render או unmount. השתמש בו במקום ReactDOM.render. תכונות חדשות ב-React 18 לא עובדות בלעדיו.
  • hydrateRoot: שיטה חדשה ללחלח יישום מעובד בשרת. השתמש בו במקום ReactDOM.hydrate בשילוב עם React DOM שרת APIs החדשים. תכונות חדשות ב-React 18 לא עובדות בלעדיו.

גם createRoot וגם hydrateRoot לקבל אפשרות חדשה בשם onRecoverableError למקרה שתקבל הודעה כאשר React מתאושש משגיאות על רינדור או הידרציה לצורך רישום. כברירת מחדל, React יהיה use reportError, או console.error בדפדפנים הישנים.

ראה מסמכים עבור React DOM לקוח כאן.

React DOM שרת

APIs החדשים האלה מיוצאים עכשיו מ-react-dom/server ויש להם תמיכה מלאה בהזרמת Suspense בשרת:

  • renderToPipeableStream: לסטרימינג בסביבות Node.
  • renderToReadableStream: עבור סביבות זמן ריצה קצה מודרניות, למשל עובדי Deno ו-Cloudflare.

שיטת renderToString המשיכה לעבוד אבל היא לא מעודדת.

ראה מסמכים עבור שרת React DOM כאן.

התנהגויות חדשות במצב קפדני

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

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

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

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

* React mounts the component.
  * Layout effects are created.
  * Effects are created.

עם מצב קפדני ב-React 18, React ידמה ביטול הרכבה והרכבה מחדש של הרכיב במצב פיתוח:

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

ראה מסמכים להבטחת state לשימוש חוזר.

חדש Hooks

useId

useId הוא Hook חדש ליצירת מזהים ייחודיים הם שרת בלקוח והן ב, תוך הימנעות מאי התאמה של הידרציה. זה בעיקר useמלא עבור ספריות רכיבים השתלבות עם APIs נגישות הדורשות מזהים ייחודיים. זה פותר בעיה קיימת ב-React 17 ומטה, אבל זה אפילו יותר חשוב ב-React 18 because של האופן שבו מעבד שרת הסטרימינג החדש מספק HTML מחוץ לסדר. ראה מסמכים כאן.

הערה

useId הוא לא ליצירת מפתחות ברשימה. מפתחות צריכים להיווצר מהנתונים שלך.

useTransition

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

useDeferredValue

useDeferredValue יכול לך לדחות עיבוד מחדש של חלק לא דחוף מהעץ. זה דומה ל-debounc, אבל יש לו כמה יתרונות בהשוואה אליו. אין עיכוב זמן קבוע, אז React ינסה את העיבוד הדחוי מיד לאחר שהעיבוד הראשון ישתקף על המסך. העיבוד הנדחה ניתן להפסקה ואינו חוסם קלט user. ראה מסמכים כאן.

useSyncExternalStore

useSyncExternalStore הוא Hook חדש המאפשר לחנויות חיצוניות לתמוך בקריאה פעולות על ידי אילוץ עדכ לחנות להיות סינכרוניים. זה מסיר את הצורך ב-useEffect בעת יישום מנויים למקורות נתונים חיצוניים, ומומלץ עבור כל ספרייה השתלבת עם state חיצונית ל-React. ראה מסמכים כאן.

הערה

useSyncExternalStore מיועד להיות used על ידי ספריות, לא יישום קוד.

useInsertionEffect

useInsertionEffect הוא Hook חדש המאפשר לספריות CSS-in-JSfeler בבעיות ביצועים של הזרקת סגנונות בעיבוד. אלא אם כן כבר בנית ספריית CSS-in-JS, אנחנו לא מצפים ממך אי פעם use זה. Hook זה יפעל לאחר שה-DOM יעבור מוטציה, אך לפני אפקטי פריסה קראה את הפריסה החדשה. זה פותר בעיה מופיעה ב-React 17 ומטה, אבל חשובה עוד יותר ב-React 18 כי use React תשואות לדפדפן בהמשך העיבוד, מה שנותן לו הזדמנות לחשב מחדש את הפריסה. ראה מסמכים כאן.

הערה

useInsertionEffect מיועד להיות used על ידי ספריות, לא יישום קוד.

איך לשדרג

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

יומן שינויים

React

React DOM

React DOM שרת

React DOM כלי בדיקה

  • זרוק כאשר act הוא used בייצור. (#21686 מאת @acdlite)
  • תמיכה בהשבתת אזרות מעשה מזויף עם global.IS_REACT_ACT_ENVIRONMENT. (#22561 מאת @acdlite)
  • אזהרת מעשה הרחב לכיסוי כל APIs שעלולים לתזמן עבודה של React. (#22607 מאת @acdlite)
  • בצע עדכוני אצווה act. (#21797 מאת @acdlite)
  • הסר אזהרה מפני השפעות פסיביות משתלשלות. (#22609 מאת @acdlite)

React רענן

  • עקוב אחר שורשים שהוא תקנו מאוחר ב-Fast Refresh. (#22740 מאת @anc95)
  • הוסף את השדה exports ל-package.json. (#23087 מאת @otakustay)

רכיבי שרת (ניסיוני)

  • הוסף תמיכה בהקשר שרת. (#23244 מאת @salazarm)
  • הוסף תמיכה ב-lazy. (#24068 מאת @gnoff)
  • עדכן את הפלאגין webpack עבור webpack 5 (#22739 מאת @michenly)
  • תקן טעות ב-Node loader. (#22537 מאת @btea)
  • השתמש ב-globalThis במקום ב-window עבור סביבות קצה. (#22777 מאת @huozhi)
PreviousReact Labs: על מה עבדנו - יוני 2022
Nextאיך לשדרג ל-React 18

How do you like these docs?