למד כיצד להשתמש ב-React 18 Hooks

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

בין התכונות החדשות יש חמישה ווים: useId, useTransition, useDerredValue, useSyncExternalStore ו-useInsertionEffect.

הגיבו השתמש ב-Transition Hook

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

רכיב SearchPage

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

יְבוּא { useState } מ "לְהָגִיב";
פוּנקצִיָהדף חיפוש() {
 const [input, setInput] = useState("")
const [רשימה, setList] = useState([]);
const listSize = 30000
פוּנקצִיָהhandleChange(ה) {
setInput(ה.יַעַד.ערך);
const listItems = [];
ל (תן אני = 0; i < listSize; i++){
listItems.לִדחוֹף(ה.יַעַד.ערך);
 }





instagram viewer

setList (listItems);
 }
לַחֲזוֹר (
<div>
<תווית>חפש ברשת: </label>
<סוג קלט="טֶקסט" value={input} onChange={handleChange} />
{רשימה.map((פריט, אינדקס) => {
 לַחֲזוֹר <מפתח div={index}>{פריט}</div>
 })}
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל SearchPage;

רכיב האפליקציה המעודכן

יְבוּא דף חיפוש מ "./Components/SearchPage";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<div>
< דף חיפוש/>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

הקוד למעלה מציג אפליקציית React עם שדה קלט:

כאשר אתה מתחיל להקליד תווים בשדה, 30,000 עותקים של הטקסט המוקלד יופיעו למטה:

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

אם ההדגמה פועלת לאט מדי או מהר מדי עבורך, נסה להתאים את listSize ערך בהתאם.

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

שימוש ב-useTransition Hook

יְבוּא {useState, useTransition} מ "לְהָגִיב";
פוּנקצִיָהדף חיפוש() {
const [isPending, startTransition] = useTransition();
 const [input, setInput] = useState("")
const [רשימה, setList] = useState([]);
const listSize = 30000
פוּנקצִיָהhandleChange(ה) {
setInput(ה.יַעַד.ערך);
 startTransition(() => {
const listItems = [];
ל (תן אני = 0; i < listSize; i++){
listItems.לִדחוֹף(ה.יַעַד.ערך);
 }
setList (listItems);
 });
 }
לַחֲזוֹר (
<div>
<תווית>חפש ברשת: </label>
<סוג קלט="טֶקסט" value={input} onChange={handleChange} />
{ממתין? "...טוען תוצאות": list.map((פריט, אינדקס) => {
 לַחֲזוֹר <מפתח div={index}>{פריט}</div>
 })}
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל SearchPage;

מעדכן את שלך דף חיפוש רכיב עם הקוד שלמעלה ייתן עדיפות לשדה הקלט על פני "אזור תוצאות החיפוש". לשינוי הפשוט הזה יש השפעה ברורה: אתה צריך להתחיל לראות את הטקסט שאתה מקליד בשדה הקלט מיד. רק ל"אזור תוצאות החיפוש" עדיין יהיה עיכוב קל. זאת בשל ה startTransitionממשק תכנות יישומים (API) מה- UseTransition Hook.

הקוד שמציג את תוצאות החיפוש לממשק המשתמש משתמש כעת ב- startTransition ממשק API. זה מאפשר לשדה הקלט להפריע לעדכון המצב של תוצאות החיפוש. כאשר ממתין() הפונקציה מציגה "... תוצאת טעינה" היא מציינת שמתרחש מעבר (ממצב אחד למשנהו).

להגיב להשתמש בהפקת ערך

ה-useDeferredValue Hook מאפשר לך לדחות את העיבוד מחדש של עדכון מצב לא דחוף. כמו ה-useTransition hook, ה-useDeferredValue הוא הוק במקביל. ה-useDeferredValue Hook מאפשר למצב לשמור על הערך המקורי שלו בזמן שהוא במעבר.

רכיב SearchPage עם ה- useDeferredValue() Hook

יְבוּא { useState, useTransition, useDeferredValue } מ "לְהָגִיב";
פוּנקצִיָהדף חיפוש() {
const [,startTransition] = useTransition();
 const [input, setInput] = useState("")
const [רשימה, setList] = useState([]);
const listSize = 30000
פוּנקצִיָהhandleChange(ה) {
setInput(ה.יַעַד.ערך);
 startTransition(() => {
const listItems = [];
ל (תן אני = 0; i < listSize; i++){
listItems.לִדחוֹף(ה.יַעַד.ערך);
 }
setList (listItems);
 });
 }
const deferredValue = useDeferredValue (קלט);
לַחֲזוֹר (
<div>
<תווית>חפש ברשת: </label>
<סוג קלט="טֶקסט" value={input} onChange={handleChange} />
{רשימה.map((פריט, אינדקס) => {
 לַחֲזוֹר <div key={index} input={deferredValue} >{פריט}</div>
 })}
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל SearchPage;

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

תגובה השתמש ב-SyncExternalStore Hook

בניגוד ל-useTransition ו-useDeferredValue ווים שעובדים עם קוד אפליקציה, useSyncExternalStore עובד עם ספריות. זה מאפשר לאפליקציית React שלך להירשם ולקרוא נתונים מספריות חיצוניות. ה-useSyncExternalStore Hook משתמש בהצהרה הבאה:

const state = useSyncExternalStore (הירשם, getSnapshot[, getServerSnapshot]);

חתימה זו מכילה את הדברים הבאים:

• מדינה: הערך של מאגר הנתונים שמחזיר ה-useSyncExternalStore.
• להירשם: רושם התקשרות חוזרת כאשר מאגר הנתונים משתנה.
• getSnapshot: מחזירה את הערך הנוכחי של מאגר הנתונים.
• getServerSnapshot: מחזירה את תמונת המצב ששימשה במהלך עיבוד השרת.

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

הגיבו להשתמש ב-InsertionEffect Hook

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

תגובה useId Hook

אתה משתמש ב-useId Hook במצבים הדורשים מזהים ייחודיים (למעט מפתחות ברשימה). המטרה העיקרית שלו היא ליצור מזהים שנשארים ייחודיים בלקוח ובשרת, תוך הימנעות משגיאת אי-ההתאמה של שרת React. ה-useId Hook משתמש בהצהרה הבאה:

const id = useId()

בהצהרה תְעוּדַת זֶהוּת היא מחרוזת ייחודית הכוללת את : אסימון. לאחר ההכרזה, אתה יכול לעבור את תְעוּדַת זֶהוּת משתנה ישירות לאלמנט(ים) שזקוקים לו.

איזה ערך מוסיפים הווים החדשים האלה לתגובה?

ה-useTransition ו-useDeferredValue הם הוקס של קוד יישום. באמצעות עיבוד במקביל, הם משפרים את הביצועים של יישומים. ה-useId Hook מתמודד עם שגיאת חוסר ההתאמה של הידרציה על ידי יצירת מזהים ייחודיים על פני לקוח ושרת.

ה-useSyncExternalStore ו-useInsertionEffect פועלים עם ספריות חיצוניות כדי להקל על עיבוד במקביל. הוק useInsertionEffect עובד עם ספריות CSS-in-JS. ה-useSyncExternalStore הוק עובד עם ספריות אחסון נתונים כמו Redux store.

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