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

072-3944399

מדוע וכיצד להשתמש
ב-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 

 

 

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

כיצד ניתן להיות מפתח Full Stack?

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

קרא עוד »

קורס Machine Learning: Welcome to the future

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

קרא עוד »

למה כדאי ללמוד קורס Data Analysis?

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

קרא עוד »

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

072-3944399

תודה!
ניצור איתך קשר ממש בקרוב.

דילוג לתוכן