React Labs: על מה עבדנו - יוני 2022

15 ביוני 2022 מאת אנדרו קלארק, דן אברמוב, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Muna_6, [Muna_6] צ’ן](https://twitter.com/mengdi_en), ריק הנלון, רוברט ז’אנג, סאתיה גונאסקרן, סבסטיאן מרקבגה, ושואן הואנג

---

---

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

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

רכיבי שרת

הכרזנו על [דמו ניסיוני של React Server Components](React (RSC) בדצמבר 2020. מאז סיימנו להשלים את התלויות שלהם ב-React 18, ועבדנו על שינויים בהשראת משוב מניסויים.

בפרט, אנחנו נוטשים את הרעיון של ספריות/O מפוצלות (בפרט, אנחנו נוטשים), ובמקום זאת מאמצים מודל async/await לתאימות טובה יותר. זה לא חוסם טכני את שחרור RSC כי אפשר להשתמש גם בבראוטרים לשליפת נתונים. שינוי נוסף הוא שאנחנו מתרחקים גם מגישת סיומות קבצים לטובת תיוג גבולות.

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

טעינת נכסים

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

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

אופטימיזציות לרינדור סטטי בשרת

Generation Sites Static (SSG) ו-Incremental Static Regeneration (ISR) הם דרכים מצוינות להשיג ביצועים טובים עבור דפים שניתנים לקאש, אבל אנחנו חושבים שאפשר להוסיף לשיפור ביצועים גם עבור Server Side Rendering (SSR) דינמי, במיוחד כשהתוכן ברובו ניתן לקאש אבל לא כולו. אנחנו בוחנים דרכים לאופטם רינדור שרת בעזרת קומפילציה ומעברים סטטים.

React אופטימיזציה מהדר

נתנו הצצה מוקדמת ל-React Forget ב-React Conf 2021. זה קומפיילר שמייצר אוטומטית את המקבילה לקריאות useMemo ו-useCallback, כדי למזער עלות רינדור מחדש ועד לשמר את מודל התכנות של __T.

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

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

מחוץ למסך

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

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

מחוץ למסך מוסיף אפשרות שלישית: להסתיר את ה-UI ויזואלית, אבל הורד עדיפות לתוכן שלו. רעיון דומה ל-content-visibility ב-CSS: כשהתוכן מוסתר, הוא לא נשאר מסונכרן עם שאר ה-UI. React יכול לדחות את עבודת הרינדור עד ששאר האפליקציה פנויה או עד שהתוכן שוב גלוי.

מחוץ למסך הוא יכול ברמה נמוכה שמאפשרת ברמה גבוהה. בדומה לאפשרות אחרת של React כמו startTransition, ברוב המקרים לא תעבדו ישירות עם Offscreen API, אלא דרך מסגרת עם דעה ברורה שמממש דפוסים כמו:

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

מעקב אחר מעבר

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

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

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

אנחנו עובדים על גרסה חדשה ל-Interaction Tracing API (כרגע בשם זמני Transition Tracing כי הוא מתחיל דרך startTransition) שפותרת את הבעיות האלה.

תיעוד React החדש

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

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

תודה ל-סופי אלפרט על סקירת הפוסט הזה!