UseEffect, useLayoutEffect ו-useEffectEvent: השוואה של הוקס של שליפת נתונים ב-React

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

ה-useEffect Hook

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

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

הנה דוגמה כיצד להשתמש ב-useEffect hook כדי להביא נתונים:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);





instagram viewer

return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

קוד זה מדגים א אפליקציה רכיב שמביא נתונים מ-API חיצוני באמצעות ה-useEffect hook. פונקציית האפקט של useEffect מביאה נתונים לדוגמה מ-API של JSONPlaceholder. לאחר מכן הוא מנתח את תגובת ה-JSON ומגדיר את הנתונים שאוחזרו ל- נתונים מדינה.

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

מאפייני ה- UseEffect Hook

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

ה-useLayoutEffect Hook

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

להלן דוגמה כיצד להשתמש ב-useLayoutEffect ב-hook כדי לשנות את הרוחב של a לַחְצָן אֵלֵמֶנט:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

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

מאפייני ה-useLayoutEffect Hook

• סינכרוני: הוא פועל באופן סינכרוני, ועלול לחסום את ממשק המשתמש אם הפעולה בתוכו כבדה.
• DOM קריאה/כתיבה: זה הכי מתאים לקריאה ולכתיבה ישירות ל-DOM, במיוחד אם אתה צריך את השינויים לפני הצביעה מחדש של הדפדפן.

ה- useEffectEvent Hook

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

לדוגמה:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

קוד זה מדגים את ה אפליקציה רכיב המנהל חיבור לשירות חיצוני. ה לְחַבֵּר הפונקציה מתחברת לכתובת URL שצוינה, בעוד ש- logConnection הפונקציה מתעדת את פרטי החיבור. לבסוף, ה onConnected הפונקציה קוראת ל- logConnection פונקציה לרישום הודעת חיבור מוצלחת כאשר המכשיר מתחבר.

ה-useEffect hook קורא לפונקציית ה-connect, ולאחר מכן מגדיר פונקציית callback onConnected לביצוע כאשר התקן מפעיל את האירוע onConnected. התקשרות חוזרת זו מתעדת הודעת חיבור. הוא מחזיר פונקציית ניקוי המופעלת כאשר הרכיב מתנתק. פונקציית ניקוי זו אחראית לניתוק המכשיר.

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

ישנן מספר דרכים לפתור את בעיית לולאת useEffect. ובכל זאת, הדרך היעילה ביותר לעשות זאת מבלי להוסיף עוד ערכים מיותרים למערך התלות שלך היא באמצעות ה-useEffectEvent.

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

על ידי גלישת הפונקציה onConnected עם ה- useEffectEvent hook, ה- useEffectEvent hook תמיד יכול לקרוא את הערכים העדכניים ביותר של ה- הוֹדָעָה ו אפשרויות כניסה פרמטרים לפני העברתו ל-useEffect hook. המשמעות היא שה-useEffect לא צריך להסתמך על הפונקציה onConnected או על הערכים שהועברו אליה.

ה- useEffectEvent Hook שימושי כאשר אתה רוצה שה-useEffect שלך יהיה תלוי בערך ספציפי, למרות שה- אפקט מפעיל אירוע הדורש ערכים אחרים שאתה מעדיף לא להשתמש בהם כתלות ב- useEffect.

מאפייני ה- UseEffectEvent Hook

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

הוק useEffectEvent עדיין ניסיוני ואינו זמין ב ווים בגרסה 18 של React.

מתי להשתמש באיזה וו?

כל אחד מאוסי איסוף הנתונים לעיל מתאים למצבים שונים:

• אוסף מידע: UseEffect הוא בחירה מצוינת.
• מניפולציות DOM ישירות: אם אתה צריך לבצע שינויים סינכרוניים ב-DOM לפני צביעה מחדש, בחר ב-useLayoutEffect.
• פעולות קלות משקל: עבור פעולות שאינן מסתכנות בחסימת ממשק המשתמש, אתה יכול להשתמש באופן חופשי בuseEffect.
• תופעות לוואי מונעות מאירועים: השתמש ב-useEffectEvent Hook כדי לעטוף את האירועים וב-useEffect Hook כדי להפעיל את תופעות הלוואי.

לטפל בתופעות לוואי ביעילות

ה-react hooks פותחים עולם של אפשרויות, והבנת ההבדל בין useEffect, ווים של useLayoutEffect ו-useEffectEvent יכולים להשפיע באופן משמעותי על אופן הטיפול בתופעות לוואי ו-DOM מָנִיפּוּלָצִיָה. חיוני לשקול את הדרישות וההשלכות הספציפיות של ווים אלה כדי ליצור יישומים ידידותיים למשתמש.