Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

מדוע וכיצד להשתמש
ב-PureComponent ב-React.js

React 15.3 שוחררה ב-29 ביוני 2016, והפריט הראשון שהוכרז בהודעת השחרור היה התמיכה ב-React.PureComponent, שהחליף את קודמו. מאמר זה דן בסיבות בגללן רכיב זה כל כך חשוב, ואיפה אפשר להשתמש בו.

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

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

React

בקוד המקור של React, במקרה שרכיב אחד הוא "טהור", מתבצעת ההשוואה הבאה:

react 2 

השוואה עמוקה היא פעולה יקרה מאוד ואם PureComponent השתמש בו,

ייגרם יותר נזק מאשר תועלת. האפשרות הקלה ביותר היא השוואה ישירה של הפרמטרים:

react 3

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

כי הזמינים אינם משתנים ומשתנים חדשים תמיד נוצרים. ספריות כמו Immutable,js הן בנות ברית נאמנות במקרה זה.

אופן השימוש

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

אחרת הוא חסר תועלת. היות ו-PureComponent מבצע השוואה שטחית, קל להתעלם מהשינויים באביזרים.

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

react דוגמא 4

אם פריט זה היה PureComponent, הוא לא היה מחדש rerender כי this.state.items עדיין מצביע לאותו אובייקט,

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

react  דוגמא 5

אם לא נרצה לאבד את היתרונות של PureComponent, עלינו להימנע ממבנים כאלה:

react דוגמא 6

המערך החדש, למרות שהוא ריק, תמיד מכריח את הרכיב לעבד מחדש.

כדי למנוע בעיה זו, ניתן להשתמש ב-defaultProps המכיל את המצב הריאלי הראשוני של הנכס.

שיטה נוספת לפתור את הבעיה היא להשתמש בקוד כזה:

react דוגמא 7

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

מסקנות

המעבר ל-PureComponent הוא די פשוט,

אם אתם מודעים למוזרויות של shallowEqual ו-JS עצמו. ברוב המקרים,

המעבר מתבצע בפשטות של שינוי במחלקת הבסיס מ:

react דוגמא 8

היישום המקורי ממשיך לעבוד בצורה חלקה עם ביצועים משופרים.

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

רוצים להפוך לתותחי על ב – React.js 

 

 

אולי תאהב/י גם:

למי מתאים קורס Java Script?

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

קרא עוד »

קורס Machine Learning

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

קרא עוד »

למי מתאים קורס Angular?

עם ליווי אישי וסיוע צמוד של אחד מבכירי מדריכי פיתוח ה-WEB בארץ, גם אתם יכולים ללמוד קורס Angular ולהרחיב משמעותית את יכולות הפיתוח שלכם. אנחנו

קרא עוד »

מה לומדים בקורס Angular?

אם אתם מחפשים מידע בנוגע לקורסים כמו קורס Angular, כנראה שאתם מעוניינים לחדד ולשדרג את מיומנויות פיתוח ה-WEB שלכם. ומאחר שחברות גדולות כיום מקבלות לשורות

קרא עוד »

העתיד שלך בהייטק מתחיל כאן
צור איתי קשר עוד היום

072-3944399

תודה!

דילוג לתוכן